Flex布局（1）

2024-04-27 15:04:17

字体：大中小

来源：转载

供稿：网友

文章转载自阮一峰的《Flex布局教程：语法篇》链接地址

一、什么是Flex布局

任何块级元素以及行级元素都可以定义为flex布局

div{ display: flex;}span{ display: inline-flex;}

Webkit内核的浏览器，必须加上-webkit前缀

.box{ display: -webkit-flex; /* Safari */ display: flex;}

设为Flex布局以后，子元素的float、clear和vertical-align属性都会失效

二、基本概念

flex布局

看图说话， - flex容器内的成员称作项目，每一个项目所占水平位置的大小叫做main size，垂直方向上的大小叫做cross size - 整个flex容器有两个轴线，水平方向的主轴线，垂直方向的交叉线 - 轴线的开始位置start和轴线的结束位置end

三、容器的属性

1、flex-direction：决定主轴的方向（即项目的排列方向）

取值： - column-reverse：主轴为竖直方向，起点在下端 - column：主轴为竖直方向，起点在上端 - row：主轴为水平方向，起点在左端（默认值） - row-reverse：主轴为水平方向，起点在右端

分别对应下面的图片 enter image description here

2、flex-wrap：默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

取值： - nowrap：不换行（默认） - wrap：换行，第一行在上方 - wrap-reverse：换行，第一行在下方

分别对应下面的图片

（1）nowrap 默认不换行

（2）wrap enter image description here

（3）wrap-reverse enter image description here 3、flex-flow：该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content：属性定义了项目在主轴上的对齐方式

取值：（这里假设主轴是从左到右） - flex-start ：从主轴的开始位置排列 - flex-end：从主轴结束的位置排列 - center：居中排列 - space-between：两端对齐，项目之间的间隔都相等 - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

对应下面的图示 enter image description here

5、align-items：定义项目（flex容器内的子元素）在交叉轴上如何对齐

取值：（这里假设主轴是从左到右） - flex-start ：从主轴的开始位置排列 - flex-end：从主轴结束的位置排列 - center：交叉轴的中点对齐 - baseline： 项目的第一行文字的基线对齐 - stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）

对应下面的图示 enter image description here

6、align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

取值：（这里假设主轴是从左到右） - flex-start ：与交叉轴的起点对齐 - flex-end：与交叉轴的终点对齐 - center：交叉轴的中点对齐 - space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 - space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 - stretch：轴线占满整个交叉轴（默认值）

对应下面的图示

enter image description here