前端基础之Flex布局

【图书推荐】《HTML5+CSS3 Web前端开发与实例教程（微课视频版）》-CSDN博客

Flex布局概述

Flex布局全称为Flexible Box布局模式，是CSS3规范中一项革命性的强大布局技术。它以“弹性”为核心理念，旨在提供一种更为灵活且功能丰富的设计解决方案。运用Flex布局的容器具备卓越的适应性，能够根据设备屏幕宽度的多样性进行动态调整，无论是桌面显示器、平板电脑还是智能手机，都能完美适配并展现最佳视觉效果。

在Flex布局的框架下，容器能够智能地伸缩其内部子元素的宽度和高度，并对子元素的排列方式进行灵活调控，从而使得整体布局能够在各种复杂场景中充分利用空间资源，实现高效的空间填充与布局优化。尤其当面临那些宽度不确定或需要精细对齐分布的设计需求时，Flex布局就显得更为重要和实用。

Flex布局的相关概念

1. Flex容器和项目

使用Flex布局的元素（display: flex或者display: inline-flex）被称为Flex容器（Flex Container），简称为“容器”。容器中的所有子元素（注意是子元素，而非后代元素）会变成Flex元素，该元素被称为Flex项目（Flex Item），简称为“项目”。

2. 主轴、交叉轴、线轴起止点

Flex容器如图12-1所示，容器中存在两根轴，默认情况下水平方向为主轴（main axis），垂直方向为交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫作main start，结束位置叫作main end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。项目默认沿主轴排列，单个项目占据的主轴空间叫作main size，占据的交叉轴空间叫作cross size。

图12-1  Flex容器

display属性

任何一个容器（块级元素或行内元素）都可以指定为Flex布局，只需将其display属性值设置为flex或者inline-flex即可，示例代码如下：

01   .container {

02       display: flex | inline-flex;

03   }

父容器设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，且子元素的display属性将变为inline-block。

flex-direction属性

主轴方向决定了容器内项目的排列方向，通过CSS3中的flex-direction属性可以改变主轴的方向，语法格式如下：

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap属性

默认情况下，所有项目会在一条轴线上显示，当容器的宽度不足时，项目的宽度会自动进行缩放。我们也可以通过flex-wrap属性来定义换行的方式，语法格式如下：

flex-wrap: nowrap | wrap | wrap-reverse;

 justify-content属性

CSS3中提供justify-content属性定义项目在主轴上的对齐方式，语法格式如下：

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items属性

CSS3中提供align-items属性来定义项目在交叉轴上的对齐方式，语法格式如下：

align-items: flex-start | flex-end | center | baseline | stretch;

align-content属性

align-content属性用于设置多行Flex项目（当 flex-wrap 设置为 wrap 或wrap-reverse时）在交叉轴上的对齐方式。这个属性仅适用于具有多行内容的弹性容器，即子元素因为容器空间不足而换行的情况。如果项目只有一根轴线，那么该属性不起作用。语法格式如下：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

《HTML5+CSS3 Web前端开发与实例教程（微课视频版）（Web前端技术丛书）》【摘要 书评 试读】- 京东图书 (jd.com)