收藏
PHPz批改状态：合格
老师批语：
这次我们用实例来演示下flex的基本功能，基本概念不容易理解，以下为实例和注释，有什么问题多多交流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实例演示flex容器和项目属性设置</title>
</head>
<body>
<style>
/* 首先对flex容器属性设置，就是所有的项目包含在flex容器内 */
.box{
display:flex;
/* 主轴方向和排列顺序 第一个值有四个值：row行从左到右,row-reverse行从右到左,column列从上到下,column-reverse列从下到上
第二个值有三个可选值：nowrap默认值单行,wrap多行,wrap-reverse和 wrap 的行为一样，但是 cross-start 和 cross-end 互换*/
flex-flow:column wrap;
/* 项目在主轴上的对齐方式 flex-start,flex-end,center,space-between,space-around*/
justify-content:center;
/* 项目在交叉轴上的对齐方式 flex-start,flex-end,center,space-between,space-around,stretch*/
align-content: center;
/* 项目在多行容器中的对齐方式 flex-start,flex-end,center,baseline,stretch*/
align-items:center;
}
.box div.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8,.item9,.item10{
order:1;
flex:0 1 auto;
/* 单个项目在交叉轴上的对齐方式 auto,flex-start,flex-end,center,baseline,stretch,另外可以单独对每个项目进行align-self设置*/
align-self: auto;
min-width:0;
min-height:auto;
border: 1px solid red;
}
</style>
<div class="box">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
<div class="item7">item7</div>
<div class="item8">item8</div>
<div class="item9">item9</div>
<div class="item10">item10</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
