一．概念
flex布局：
Flex Box 的缩写，意味“灵活的盒子”或“弹性盒子”，所以flex布局又称“弹性布局”。
- flex容器
采用flex布局的元素，成为flex容器。display:flex;
- flex项目
flex容器的所有子元素自动成为容器成员，称为flex项目。
<div style=“ display:flex;”> <img > <div></div> <p></p> <p> <a></a></p> </div>
注：<a>不是项目，如果想让<a>成为项目可以给其父元素<p>添加display:flex；
<style>
ul{list-style-type: none;}
li{width: 100px; text-align: center;}
a{text-decoration: none;}
ul{display: flex;} /*可以让垂直导航变水平 因为项目默认沿主轴排列*/
</style>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</body>
二．属性
容器属性：
display 是否flex布局
flex-direction 主轴方向
flex-wrap 是否换行
flex-flow flex-firection/flex-wrap的缩写
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上的对齐方式
align-content 许多行项目整体在交叉轴上的对齐方式
- display
是否使用flex布局。
display ：flex / inline-flex；
Flex：将元素作为块级弹性伸缩盒显示；
inline-flex：将元素作为内联块级弹性伸缩盒显示。
- flex-direction
决定主轴的排列方向，即项目的排列方向。
flex-direction : row / row-reverse / column / column-reverse;
row:水平（左到右）默认
row-reverse：反转水平（右到左）
column：垂直（上到下）
column-reverse：反转垂直（下到上）
- flex-wrap
如果项目沿主轴一行排不了，决定是否换行。
flex-wrap : nowrap / wrap / wrap-reverse;
nowrap ：默认 不换行 平均压缩每一个项目排满一行
wrap ：正向换行 （第一行在上方）
wrap-reverse：反向换行（第一行在下方）
- flex-flow
是flex-direction和flex-wrap的缩写。
flex-flow : flex-direction flex-wrap；
默认：flex-flow：row nowrap;
- justify-content
定义项目在主轴上的对齐方式。
justify-content : flex-start / flex-end / center / space-between / space-around；
flex-start：主轴开始 默认
flex-end：主轴结束
center：主轴中心
space-between：两端对齐，项目中间间隔相等
space-around：每个项目两侧的间隔相等（项目之间的间隔比项目与边框的距离大一倍）
- align-items
定义在交叉轴上如何对齐。
align-items : flex-start / flex-end / center / baseline / stretch；
flex-start：交叉轴开始
flex-end：交叉轴结束
center：交叉轴中心
baseline：项目的第一行文字的基线对齐
strech：默认 如果项目未设置高度或高度为auto，项目将占满容器的高度
- align-content
定义多行项目在交叉轴上如何对齐，如果项目只有一个，该属性不起作用。
align-content : flex-start / flex-end / center / space-between / space-around / stretch；
flex-start：整体从交叉轴开始对齐
flex-end：整体从交叉轴结束对齐
center：整体从交叉轴中心对齐，用于设置多行垂直居中
space-between：整体与交叉轴中点对齐，多行之间的间隔平均分配
space-around ：每行的上下加个都相等，所以，每行之间的间隔比两端与边框的间隔大一倍。
strech：默认 如果项目未设置高度或高度为auto，项目将占满容器的高度
- 项目属性：
order：项目的排列顺序
flex-grow：项目放大
flex-shrik：项目缩小
flex-basis：主轴空间
flex：flex-grow flex-shrik flex-basis 的缩写
align-self：单个项目对齐方式
- order
定义项目的排列顺序，默认为0。
order：数值；
数值越小排列越靠前。
例如，order值为-1的项目排在前面。
- flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）；
如果一个项目的flex-grow属性为2，其它为1，则前者占剩余空间将比其它项目多一倍，依次类推；
如果有的项目有flex-grow属性，有的项目有width属性，有flex-grow属性的项目将等分剩余空间。
- flex-shrink
定义项目的缩小比例，默认为1，即如果空间不足，项目将被缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将被等等比例缩小；
如果一个项目的flex-shrink属性为0，其它项目都为1，则空间不足时，前者不缩小；
注意负值对该属性无效。
- flex-basis
定义了项目占据的主轴空间（main-size）。
如果主轴为水平，效果跟width一样；
如果主轴为垂直，效果跟height一样；
如果同时设置，flex-basis优先级高于width/height；
默认值为auto，即项目本来width/height。
- flex
是flex-grow flex-shrik flex-basis 的缩写，默认值为 0 1 auto；
后2个属性值可选，即flex：1；等同于flex：1 1 auto；
该属性有两个快捷值auto（1 1 auto）、none（0 0 auto）。
- align-self
设置单个项目与其它项目不一样交叉轴上的对齐方式，即可覆盖align-items属性。
ü默认值为auto，表示继承父元素（即flex容器）的align-items属性，如果没有，等同于strech。
üalign-self：auto / flex-start / flex-end / center / baseline / stretch;
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/5769.html
微信扫一扫 
支付宝扫一扫