flex布局常用css属性

最新推荐文章于 2023-12-15 10:38:37 发布

karry_lin

最新推荐文章于 2023-12-15 10:38:37 发布

阅读量701

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/karry_lin/article/details/127222745

版权

简介：

flex布局，又称弹性布局，多用于移动端开发，具有操作方便、布局简单的优势，相较于传统布局，flex布局的PC端兼容性较差，IE11或更低版本仅部分支持，甚至不支持。

当我们将父元素设为flex布局时（display:flex）,子元素的float、clear、vertical-align属性将失效。

flex布局的原理就是通过给父容器添加flex属性，来控制子元素的位置和排列方式。

父元素常用属性：

1.flex-direction：设置主轴的方向，默认值是 row ，以x的正方向为主轴；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex布局</title>
  <style>
    div {
      width: 400px;
      height: 100px;
      background-color: black;
      padding: 10px;
      display: flex;
      flex-direction: row; /*值为row时可以省略此行代码*/
    }
    div span {
      width: 100px;
      text-align: center;
      font-size: 30px;
    }
    #blue {
      background-color: blue;
    }
    #yellow {
      background-color: yellow;
    }
    #red {
      background-color: red;
    }
  </style>
</head>
<body>
<div>
  <span id="blue">1</span>
  <span id="yellow">2</span>
  <span id="red">3</span>
</div>
</body>
</html>

flex-direction: row 从左至右排列效果图

flex-direction: column 从上至下排列效果图

flex-direction: row-reverse 从右至左排列效果

flex-direction: column-reverse 从下至上排列效果

2.justify-content: 设置主轴上子元素的排列方式，默认值为flex-start，当主轴为x轴时，子元素以从左向右的方式进行排列；

justify-content: flex-start 排列效果从左向右，子元素整体左对齐

justify-content: flex-start 排列效果从左向右，子元素整体右对齐

justify-content: space-around 排列效果为剩余空间平均分配给子元素

justify-content: space-between 排列效果为两端对齐，剩余部分中间的子元素平均分配

justify-content: center 设置子元素在主轴上居中排列，如下图，当x为主轴时，排列效果为子元素整体水平居中

3.flex-wrap: 设置子元素是否换行显示，默认值为nowrap，不换行。在flex布局中，子元素默认是沿着轴线一行排列，当出现子元素全部宽度加起来超过父元素宽度时，子元素宽度会出现压缩；

flex-wrap: nowrap 子元素不换行，超长时进行压缩排列

flex-wrap: wrap 超长时子元素换行排列

4.align-items: 设置子元素在侧轴上的排列方式（单行），默认值为flex-start，自上向下；（为了演示效果，关于align-items的取值效果图展示默认设置了justify-content: center）

align-items: flex-start 效果

align-items: flex-end 效果

align-items: center 效果

align-item: stretch 当不设置子元素高度时，该属性会将子元素拉伸占满父容器

5.align-content: 设置子元素在侧轴上的排列方式（多行），仅适用于子元素换行的情况，单行设置该属性无效，默认值为flex-start，从侧轴的头部开始排列；（以下为了演示效果给子元素设置了外边距，设置了justify-content: center）

align-content: flex-start，从从侧轴的头部开始排列

align-content: flex-end，从侧轴的尾部开始排列

align-content: space-around，平分侧轴上的剩余空间

align-content: space-between，先侧轴两端对齐，再平分中间剩余空间

align-content: center，子元素整体居中（当主轴为row时，就是整体垂直居中的效果）

align-content: stretch，子元素整体拉升占满父容器（子元素未设置高度才有效）

6.flex-flow:设置flex布局的主轴和是否允许换行/列，相当于flex-direction和flex-wrap的简写形式，flex-flow的取值第一个用于设置主轴，第二个用于设置是否换行，可选择的值就时flex-direction和flex-wrap的值，例如flex-flow: column wrap就代表设置y轴为主轴且允许换列显示；

子元素常用属性：

1.flex: 定义子元素分配剩余空间所占份数，取值为number，例如，当子元素没有设置宽度，flex: 1就代表子元素平均分配父容器宽度；

2.align-self: 设置子元素自己在侧轴上的排列方式，默认值为auto，表示继承父元素的align-items属性，如果没有没有父元素就类似stretch效果，某个子元素设置该属性后会覆盖掉父元素设置的align-items；例如align-self: flex-end效果如下（给第三个子元素设置align-self: flex-end）