Flex布局完全指南：实现响应式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/118523171

本文详细介绍了Flex布局，包括如何设置水平和垂直方向的对齐方式，如justify-content和align-items属性的使用。同时讲解了flex-wrap属性用于控制换行，flex-direction属性改变主轴方向，以及flex属性的综合应用。通过这些属性，可以轻松实现元素的水平垂直居中对齐。了解并掌握这些概念，对于创建响应式网页设计至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                                     **flex布局**
flex布局,关于水平和垂直方向的设置.
首先是给父盒子设置未 display:flex,
水平方向的设置:justify-content属性

**

水平方向的位置 justify-content:

**
flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。

垂直方向:align-items属性: .

box { align-items: flex-start | flex-end | center
| baseline | stretch;
 flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
 center：交叉轴的中点对齐。
  baseline:项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

换行:flex-wrap属性

flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

切换方向:flex-direction属性

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

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

如果需要水平垂直居中：设置
display: flex;
justify-content: center;
align-items: center;