Flex布局详解_flex: 0 0 412px-优快云博客

本文链接：https://blog.youkuaiyun.com/chu396815830/article/details/142374814

Flex布局，即弹性盒布局（Flexible Box Layout），是一种一维的布局模型，旨在提供一种更灵活的方式来进行页面布局。它可以简便、完整地实现各种页面布局，相比传统的布局方式更加方便和高效。

一、基本概念

容器和项目
- 容器（flex container）：采用display:flex或display:inline-flex来定义的元素，它的直接子元素自动成为容器成员，被称为项目（flex item）。
- 项目（flex item）：容器内的每个子元素都是一个项目。
主轴（main axis）和交叉轴（cross axis）
- 主轴：默认情况下，主轴是水平方向，从左到右。但可以通过flex-direction属性来改变主轴的方向。
- 交叉轴：与主轴垂直的轴。如果主轴是水平方向，交叉轴就是垂直方向；如果主轴是垂直方向，交叉轴就是水平方向。

二、容器的属性

display
- flex：将容器定义为块级弹性容器。
- inline-flex：将容器定义为行内弹性容器。
flex-direction
- row（默认值）：主轴为水平方向，从左到右。
- row-reverse：主轴为水平方向，从右到左。
- column：主轴为垂直方向，从上到下。
- column-reverse：主轴为垂直方向，从下到上。
flex-wrap
- nowrap（默认值）：项目在主轴方向上不换行，可能会导致项目缩小以适应容器。
- wrap：项目在主轴方向上换行。
- wrap-reverse：项目在主轴方向上反向换行。
flex-flow
- 是flex-direction和flex-wrap的简写属性，例如flex-flow: row wrap。
justify-content
- flex-start（默认值）：项目在主轴起点对齐。
- flex-end：项目在主轴终点对齐。
- center：项目在主轴居中对齐。
- space-between：项目在主轴上两端对齐，项目之间的间隔相等。
- space-around：项目在主轴上均匀分布，项目两侧的间隔相等。
align-items
- stretch（默认值）：如果项目未设置高度或设为auto，项目将拉伸以适应容器的高度。
- flex-start：项目在交叉轴起点对齐。
- flex-end：项目在交叉轴终点对齐。
- center：项目在交叉轴居中对齐。
- baseline：项目根据它们的基线对齐。
align-content
- 当项目有多行时，用于控制行在交叉轴上的对齐方式。属性值与justify-content类似，包括stretch、flex-start、flex-end、center、space-between、space-around。

三、项目的属性

order
- 定义项目的排列顺序。默认值为0，可以设置为整数。数值越小，项目在主轴上的排列顺序越靠前。
flex-grow
- 定义项目的放大比例。默认值为0，表示不放大。如果所有项目的flex-grow值都为0，当容器有剩余空间时，项目不会放大。如果有项目的flex-grow值大于0，这些项目将按比例分配剩余空间。
flex-shrink
- 定义项目的缩小比例。默认值为1，表示当容器空间不足时，项目会缩小。如果设置为0，则项目不会缩小。
flex-basis
- 定义项目在分配剩余空间之前的初始大小。可以设置为长度值（如100px）或百分比。默认值为auto，表示项目的初始大小根据其内容自动确定。
flex
- 是flex-grow、flex-shrink和flex-basis的简写属性，例如flex: 1 1 200px表示项目放大比例为1，缩小比例为1，初始大小为200px。
align-self
- 允许单个项目覆盖容器的align-items属性。属性值与align-items相同，可以用来单独设置某个项目在交叉轴上的对齐方式。

四、示例

以下是一个简单的Flex布局示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
   .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 200px;
    }

   .item {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>

</html>