css display:flex 属性

本文深入讲解Flex布局,包括display:flex的特性与优势,详解flex的六个核心属性:flex-direction、flex-wrap、justify-content、align-items、align-content及它们在页面布局中的应用案例。

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

转载:https://www.jianshu.com/p/d9373a86b748

一:display:flex 布局

display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二:flex的六个属性
  • flex-direction 容器内元素的排列方向(默认横向排列)
    1:flex-direction:row; 沿水平主轴让元素从左向右排列
    1536039075.png

    2:flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
    1536039314(1).png

    3:flex-direction:row-reverse;沿水平主轴让元素从右向左排列
    1536039460(1).png
  • flex-wrap 容器内元素的换行(默认不换行)
    1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
    2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;
  • justify-content 元素在主轴(页面)上的排列
    1:justify-content : center;元素在主轴(页面)上居中排列
    1536041764(1).png

    2:justify-content : flex-start;元素在主轴(页面)上由左或者上开始排列
    1536041631(1).png

    3:justify-content : flex-end;元素在主轴(页面)上由右或者下开始排列
    1536042053(1).png

    4:justify-content : space-between;元素在主轴(页面)上左右两端或者上下两端开始排列
    1536042390(1).png

    5:justify-content : space-around;每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。
    1536042636(1).png
  • align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式
    1:align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。
    1536043107(1).png

    2:align-items : flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐)
    1536043238(1).png

    3:align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)
    1536043373(1).png

    4:align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。(靠上对齐)
  • align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
#main {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: flex-start;
}
#main div {
  width: 70px;
  height: 70px;
}

1:align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。


1536046493(1).png

2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。


1536046542(1).png

3:align-content: center; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
1536046654(1).png

4:align-content: stretch; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。


1536046771(1).png

5:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
1536046899(1).png

6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。
1536047051(1).png
三:flex常见属性总结
  • Positional alignment
    justify-content: center; :居中排列
    justify-content: flex-start; /* 从行首起始位置开始排列 /
    justify-content: flex-end; /
    从行尾位置开始排列 */
<think>我们正在回答用户关于CSS display:flex的问题。用户要求详细解释该属性的使用方法和布局效果。 根据引用内容,我们可以整理出以下要点: 1. display:flex用于创建一个弹性容器(flex container),其子元素成为弹性项目(flex items)。 2. 弹性布局的主要属性可以分为容器属性和项目属性。 3. 容器属性包括:flex-direction, flex-wrap, justify-content, align-items, align-content。 4. 项目属性包括:order, flex-grow, flex-shrink, flex-basis, flex(复合属性), align-self。 我们将按照以下结构组织回答: 一、弹性布局基本概念 二、容器属性详解 三、项目属性详解 四、常见布局场景示例 五、注意事项 注意:在回答中,我们将使用行内数学表达式(不需要,因为这里没有数学公式)和独立公式(同样不需要)。但需要按照要求使用$...$和$$...$$,但这里主要是CSS代码,所以用代码块展示。 同时,在回答末尾,我们会生成相关问题。 开始回答:</think>### CSS `display: flex` 属性详解与布局教程 #### 一、基本概念 `display: flex` 用于创建弹性布局容器,容器内的子元素自动成为**弹性项目(flex items)**,支持响应式排列和动态调整尺寸。核心特点: - **一维布局**:沿主轴(main axis)或交叉轴(cross axis)单方向排列。 - **自适应空间分配**:子元素可自动填充剩余空间或收缩避免溢出。 - **对齐控制**:灵活控制项目在容器内的对齐方式。 #### 二、容器属性详解(父元素) 1. **`flex-direction`**:定义主轴方向 ```css .container { flex-direction: row; /* 默认:水平排列(左→右) */ flex-direction: row-reverse; /* 反向水平(右→左) */ flex-direction: column; /* 垂直排列(上→下) */ flex-direction: column-reverse; /* 反向垂直(下→上) */ } ``` 2. **`flex-wrap`**:控制换行 ```css .container { flex-wrap: nowrap; /* 默认:不换行(可能溢出) */ flex-wrap: wrap; /* 换行(多行排列) */ flex-wrap: wrap-reverse; /* 反向换行 */ } ``` 3. **`justify-content`**:主轴对齐方式 ```css .container { justify-content: flex-start; /* 默认:左对齐 */ justify-content: flex-end; /* 右对齐 */ justify-content: center; /* 居中 */ justify-content: space-between; /* 两端对齐,项目间隔相等 */ justify-content: space-around; /* 项目两侧间隔相等 */ } ``` 4. **`align-items`**:交叉轴对齐(单行) ```css .container { align-items: stretch; /* 默认:拉伸填满容器高度 */ align-items: flex-start; /* 顶部对齐 */ align-items: flex-end; /* 底部对齐 */ align-items: center; /* 垂直居中 */ } ``` 5. **`align-content`**:多行对齐(需配合 `flex-wrap: wrap`) ```css .container { align-content: space-between; /* 多行两端对齐 */ align-content: center; /* 多行垂直居中 */ } ``` #### 三、项目属性详解(子元素) 1. **`flex-grow`**:分配剩余空间的比例 ```css .item { flex-grow: 1; } /* 默认0(不扩展),值越大占据空间越多 */ ``` 2. **`flex-shrink`**:空间不足时的收缩比例 ```css .item { flex-shrink: 1; } /* 默认1(可收缩),0表示不收缩 */ ``` 3. **`flex-basis`**:初始尺寸基准 ```css .item { flex-basis: 200px; } /* 类似width,但优先级更高 */ ``` 4. **`flex` 复合属性**(推荐) ```css .item { flex: 1; /* 等价于 flex: 1 1 0% */ flex: 0 0 200px; /* 不伸缩,固定宽度200px */ flex: 2 1 auto; /* 扩展比例2,可收缩,基准为内容宽度 */ } ``` 5. **`align-self`**:覆盖容器的交叉轴对齐 ```css .item { align-self: flex-end; } /* 单独控制该项目底部对齐 */ ``` #### 四、常见布局场景示例 1. **水平居中 + 垂直居中** ```css .container { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ } ``` 2. **三栏布局(两侧固定,中间自适应)** ```html <div class="container"> <div class="left">固定200px</div> <div class="middle">自适应宽度</div> <div class="right">固定200px</div> </div> ``` ```css .container { display: flex; } .left, .right { flex: 0 0 200px; } /* 不伸缩,固定200px */ .middle { flex: 1; } /* 占据剩余空间 */ ``` 3. **等高分栏** ```css .container { align-items: stretch; } /* 默认即等高 */ ``` 4. **响应式导航栏** ```css .nav { display: flex; flex-wrap: wrap; /* 小屏幕自动换行 */ } .nav-item { flex: 1; min-width: 100px; } /* 最小宽度防止过小 */ ``` #### 五、注意事项 1. **浏览器兼容性**:现代浏览器全面支持,IE10/11需前缀 `-ms-flex`。 2. **嵌套问题**:避免过度嵌套弹性容器,可能导致布局复杂化。 3. **性能优化**:`flex` 布局性能优于浮动,但大规模项目需注意 `align-content` 的计算开销。 > 引用说明:弹性布局通过主轴和交叉轴定义排列逻辑[^1],`flex` 复合属性简化了空间分配控制[^4],多行对齐需结合 `flex-wrap` 和 `align-content`[^2]。 --- ### 相关问题 1. `flex: 1` 和 `flex: auto` 有什么区别? 2. 如何实现 Flex 布局的响应式换行效果? 3. Flex 布局中 `align-items` 和 `align-content` 的区别是什么? 4. 在移动端使用 Flex 布局有哪些最佳实践? 5. Flex 布局与 Grid 布局应如何选择?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值