display:flex; 让父元素变成伸缩盒布局,子元素默认水平排列(row);
flex-wrap:wrap;换行;
flex-direction:column;子元素竖着排列;
flex
是 flex-grow
、flex-shrink
、flex-basis
的缩写
flex-grow:定义弹性盒子项(flex item)的拉伸因子
flex-grow: 3;
flex-grow:inherit;
// 常用flex属性 有一串数字123456789
display: flex;
flex-direction: column; // 排列:row: 1~9 从左到右排列 row-reverse 从右到左 9~1排列
column: 1~9 从上到下排列 column-reverse 从下到上 9~1排列
align-items: flex-start; // 起始位置
align-items: center; // 中间位置
align-items: flex-end; // 最后位置
justify-content: flex-start; // 起始位置
justify-content: center; // 中间位置
justify-content: flex-end; // 最后位置
align-items和justify-content组合起来就类似一个九宫格
<body>
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
</body>
flex-shrink:flex子项
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
flex-basis:
flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。