简单介绍弹性盒子布局flex属性教程
flexbox
布局最常用的是flex
属性。它可以设置父容器上的弹性盒子属性,包括弹性盒子的方向、对齐方式、伸缩比例、是否换行、是否开启主轴方向上的空间分配等等。下面编程教程网小编给大家简单介绍一下这些常用的flex属性值:
1. flex-direction
该属性指定了弹性容器中的主轴的方向,从而决定了弹性盒子排列的方向。默认值为row,表示水平方向从左到右。
2. justify-cotent
该属性定义了子元素沿着主轴方向的对齐方式。注意,这个属性只有当所有元素的宽度之和小于父容器的宽度时才会生效。
3. align-items
该属性定义了子元素在交叉轴(与主轴垂直的轴)上的对齐方式。
4. flex-wrap
该属性指定了弹性盒子是否可以换行。默认情况下,所有元素将在同一行上排列,即不会换行。
5. align-content
该属性定义了多行弹性盒子在交叉轴上的分布方式。这里涉及到多个弹性盒子之间的间距问题。