布局神器---flexbox

最新推荐文章于 2025-06-20 09:10:42 发布

原创最新推荐文章于 2025-06-20 09:10:42 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #flex #css3

css 同时被 2 个专栏收录

20 篇文章

订阅专栏

百度前端技术学院

10 篇文章

订阅专栏

本文详细介绍CSS3中的Flexbox布局模式，包括如何通过设置属性控制容器元素的对齐方式、排列方向及顺序，以及如何实现快速布局实例。

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

1.flexbox

flexbox：
是css3中的新的布局模式，可以控制未知容器元素的对齐方式、排列方向、排列顺序。
flex布局：（由父元素和它的直接子元素组成）
父元素：成为flex容器
直接子元素：成为flex项目/flex item

2.flex容器的属性：

设置display:flex;/display:inline-flex;
设置flex容器的主轴方向，执行flex项目在flex容器中的排列方式。
flex-direction:row/row-reverse/column/column-reverse;
flex项目在flex容器中默认显示一行，若控制flex项目在flex容器按一行或者多行排列flex-wrap:nowrap(默认值)/wrap/wrap-reverse;
flex-flow(是flex-direction和flex-wrap属性的简写)
制定flex项目在flex容器沿着主轴在当前行的对齐方式justify-content:flex-start/flex-end/center/space-between/space-around;
flex项目在容器側轴对齐方式，类似于justify-content,align-items:stretch（填满默认值）/flex-start/flex-end/center/baseline;
flex容器内的行内flex容器中側轴排列方式align-content:stretch/flex-start/flex-end/center/space-between/space-around;
flex容器上不能使用::first-line和::first-letter伪元素.所有column-*属性在flex容器上都不生效

3. flex项目属性：

控制flex容器中flex项目的排列顺序order，默认值是0
制定flex项目的放大和缩小比例，决定了flex项目相对flex容器自由空间进行放大缩小flex-grow、flex-shrink
制定flex项目的大小flex-basis（与width和height相同）
flex(flex-grow,flex-shrink,flex-basis属性的简写)
使用align-self属性可以指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目。
使用align-items对齐方式来解释flex容器，能更好的理解他们的值。

4. 快速布局实例：

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <link href="task22.css" rel="stylesheet">
  </head>

  <body>
    <div class="root">

      <div class="child1">

        <div class="child2">

          <div class="child3">
          </div>
          <div class="child3">
          </div>

        </div>

        <div class="child2">

          <div class="child3">
          </div>
          <div class="child3">
          </div>

        </div>

      </div>

      <div class="child1">

        <div class="child2">

          <div class="child3">
          </div>
          <div class="child3">
          </div>

        </div>

        <div class="child2">

          <div class="child3">
          </div>
          <div class="child3">
          </div>

        </div>

      </div>

    </div>
    <form>
      <input type="radio" name="traverse" id="before"/>
      <label for="before">前序遍历</label>
      <input type="radio" name="traverse" id="middle"/>
      <label for="middle">中序遍历</label>
      <input type="radio" name="traverse" id="behind"/>
      <label for="behind">后序遍历</label>
    </form>
  </body>
</html>

.root {
  display: flex;
  border: 1px solid black;
  margin: 20px;
  padding: 10px;
  width: 1000px;
  height: 300px;
  flex-direction: row;
}
.child1 {
  display: flex;
  border: 1px solid black;
  margin: 20px;
  flex-grow: 1;
}
.child2 {
  display: flex;
  border: 1px solid black;
  margin: 20px;
  flex-grow: 1;
}
.child3 {
  border: 1px solid black;
  margin: 20px;
  flex-grow: 1;
}