CSS3的flex布局
程序员文章站
2022-04-29 19:53:23
...
<body>
<div class="box1">
<p class="box2">1</p>
<p class="box3">2</p>
<p class="box4">3</p>
</div>
</body>1.父级元素使用display：flex后，所有的子集元素都会转换成行级元素，也就是自动浮动成一列。
2.webKit内核的浏览器必须加上前缀 -webkit，其他内核的浏览器可以不加。 display: -webkit-flex; /* Safari */
3.父级元素，也就是容器的属性有
flex-direction 代表主轴方向，也就是控制子集元素横向排列还是纵向排列
flex-wrap 行级排列时，控制子集是否自动换行
flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap（从左往右排列，不换行）
justify-content 控制所有子集的对齐方式，居中对齐还是怎么对齐
align-items 控制所有子集元素，在垂直方向的对齐方式
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。——–下面网址是具体属性的对应参数和具体现象
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
下面是子集元素的属性，也就是项目属性
order 定义排列顺序，数值越小，位置越靠前
flex-grow 放大比例。默认是0，也就是不放大
flex-shrink 缩小比列，默认值为1，如果父集空间不够排列，则自动缩小。
flex-basis 它的默认值为auto，即项目的本来大小。
flex flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self 设置单个子集元素的对齐方式flex-basis：可以控制在主轴方向上的所占空间，可以是水平方向，也可以是垂直方向。具体看主轴的定义在水平方向还是在垂直方向
flex属性值通常为1，表示子集元素不放大比例，自适应父级元素容器宽度，项目大小和原来一样
表现为下图所示
flex：1align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
——–下面网址是具体属性的对应参数和具体现象
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
推荐阅读