标签：justify 一半 自动换行 center asi axis items 设置 rect
flex盒子模型由容器（flex container）以及容器的直接子元素（flex item）组成。
以容器（flex container）定义，有主轴（main axis）以及交叉轴（cross axis）,主轴的开始位置（与边框的交叉点）叫做main start,结束位置叫做main end.交叉轴的开始位置叫做cross start，结束位置叫做cross end。
（注意:当布局排列方式变化的时候，main axis跟cross axis的方向也会跟着变化,这一点非常重要）主轴(main axis)可以是水平方向,也可以是垂直方向,而交叉轴(cross axis)始终是与主轴垂直
display: flex | inline-flex(适用于父类容器元素上)
定义一个flex容器，内联或者根据指定的值，来作用于下面的子类容器。
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本2009）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本2011）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
首先得指定元素是flex布局 块状元素 -> display:flex 行内元素 -> display:inline-flex 例如: .box{ display: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：反转 wrap 排列,(下一行位置与交叉轴位置相反)
flex-flow (适用于父类容器上) //flex-direction和flexwrap的符合写法
flex-flow: <‘flex-direction’> || <‘flex-wrap’> [ 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：平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。
space-evenly:均匀的排列每个元素，每个元素之间的距离相等
align-items(适用于父类容器上)：确定在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
flex-start：交叉轴的起始位置
flex-end：交叉轴的结束位置
center：在交叉轴居中
baseline：在基准线上保持对齐
stretch：如果条目的交叉轴尺寸的计算值是“auto”，则其实际使用的值会使得盒子在交叉轴方向上尽可能地占满。（设置高度后是不起作用的）
align-content (适用于父类容器上)：用来处理交叉轴空白空间（对单行不起作用）
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start：行集中于容器的交叉轴起始位置
flex-end:行集中于容器的交叉轴结束位置
center：行集中于容器的中央
space-between：行在容器中均匀分布。
space-around：行在容器中均匀分布，两端保留子元素与子元素之间间距大小的一半。
space-evenly:均匀的分布在交叉轴中
stretch：伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。
align-self (适用于子类容器上)：
align-self: flex-start | flex-end | center | baseline | stretch
flex-start：交叉轴的起始位置
flex-end：交叉轴的结束位置
center：在交叉轴居中
baseline：在基准线上保持对齐
stretch：如果条目的交叉轴尺寸的计算值是“auto”，则其实际使用的值会使得盒子在交叉轴方向上尽可能地占满。（设置高度后是不起作用的）
当"align-self"的值为 auto 时，其计算值是父节点的属性"align-items"的值。如果该节点没有父节点，则计算值为"stretch"。
用来覆写容器指定的对齐方式
order (适用于子元素)：用来设置自容器的排列顺序
用整数值来定义排列顺序，数值小的排在前面。可以为负值。
flex:适用于子类容器:设置或检索伸缩盒对象的子元素如何分配空间。
复合属性。
如果缩写flex:1, 则其计算值为：1 1 0%；none：none关键字的计算值为: 0 0 auto
flex:auto 1 1 auto; flex:2 100px; 2 1 100px;
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
[ flex-grow ]：定义弹性盒子元素的扩展比率。默认值：0（当有内容剩余时，每个子容器按照这个比例扩展内容）
[ flex-shrink ]：定义弹性盒子元素的收缩比率。默认值：1（收缩比例，当有内容溢出时，这个属性才会起作用）
[ flex-basic ]：定义弹性盒子元素的默认基准值。默认值：auto（扩展或收缩内容时，以这个值为基准）若为auto,则以width为基准。其余以值为基准
标签：justify 一半 自动换行 center asi axis items 设置 rect
原文地址：https://www.cnblogs.com/Lia-633/p/9821491.html
