CSS의 플렉스박스 소개

오늘 우리는 주로 여러 속성 중에서 유연한 상자를 소개합니다

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

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

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

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

기본 설정 텍스트입니다. 아래 그림은 기본 설정을 보여줍니다

위 내용은 CSS의 플렉스박스 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!