Flex布局实战详解（上）

2023-06-27 102

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Flex布局实战详解（上）

Flex布局详解

1. 父项属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素排列方式（多行）
align-items：设置侧宙上的子元素排列方式（单行）
flex-flow：复核属性，相当于同时设置了flex-direction和flex-wrap

1.1 flex-direction 设置主轴的方向

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素都是跟着主轴来排列的

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column	从下到上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    div{
      width: 800px;
      height: 300px;
      background-color: pink;
      display: flex ;
      /* 默认的按照行排列的，元素是按照主轴排列的 */
      /* flex-direction: row; */
      /* flex-direction: row-reverse; */
      flex-direction: column;
    }
    div span{
      width: 200px;
      height: 200px;
      background-color: green;
    }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </body>
</html>

1.2 justify-content设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是那个

属性值	说明
flex-start	默认值从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间（重要）

1.2.1 flex-start(默认)

1.2.2 flex-end

1.2.3 center

1.2.4 space-around

1.2.5 space-between

<style>
div{
    width: 800px;
    height: 300px;
    background-color: pink;
    display: flex ;
    /* 默认沿着主轴从左到右排列 */
    justify-content: flex-start;
    /* 如果主轴是x，则从右到左排列 */
    justify-content: flex-end;
    /* 居中排列 */
    justify-content: center;
    /* 平分剩余空间 */
    justify-content: space-around;
    /* 先两边贴边再平分剩余空间 */
    justify-content: space-between;
}
div span{
    width: 200px;
    height: 200px;
    background-color: green;
}
</style>

1.3 flex-wrap设置元素是否换行

flex默认让子元素在一行显示，项目都排在一条线上（又称“轴线”）,如果装不开会缩小子元素的宽度。

属性值	说明
nowrap	默认值，不换行
wrap	换行

设置flex-wrap:wrap之后

1.4 align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
streth	拉伸

1.4.1 flex-start(默认)

1.4.2 flex-end

从下到上

1.4.3 center

垂直居中

1.4.4 streth

去掉height

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div{
        width: 800px;
        height: 400px;
        background-color: pink;
        display: flex ;
        justify-content: center;
        align-items: flex-start;
        align-items: flex-end;
        align-items: center;
        align-items: stretch;
      }
      div span{
        width: 150px;
        height: 100px;
        background-color: green;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </body>
</html>