弹性盒子

css中flex弹性盒子的介绍

 

今天主要从他几个属性来介绍弹性盒子

 

1	display: flex；把元素设置成弹性容器

1 2 3 4

1.flex-direction:可以改变flex容器的方向让其子元素来弹性布局 row定义主轴方向为X轴从左到右 row-reverse 从右到左 column 定义主轴方向为Y轴从上到下

1 2 3 4 5 6

2.justify-content排列方式，让其子元素按不同方式进行排列 flex-start: 从行首开始排列。 flex-end: 从行尾开始排列 center: 元素向每行中点排列。 space-between : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 space-around:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

1 2 3 4 5

3.flex-wrap用来设置换不换行 nowrap:flex 的元素被摆放到到一行 wrap: flex 元素大于整个父级整个元素时就会另起一行进行排列 wrap-reverse :和 wrap 的行为一样,但会与原来的方向相反 4.align-items:弹性盒子的对齐方式