Flex布局实战详解（下）-阿里云开发者社区

Flex布局实战详解（下）

2023-06-27 70

版权

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

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

1.5 align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），单行的情况下是无效的

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

1.5.1 flex-start（默认）

1.5.2 flex-end

在侧轴的尾部开始排列

1.5.3 center

1.5.4 space-around

1.5.5 space-between

1.5.6 stretch

去掉子元素的hight

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

1.6 align-content和align-items的区别

align-items 适用于单行情况下，只有上对齐、下对其、居中和拉伸
align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找align-items多行找align-content

1.7 flex-flow

flex-flow属性是flex-direction和flex-wrap的复核属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div{
        width: 800px;
        height: 400px;
        background-color: pink;
        display: flex;
        /* flex-direction: column; */
        /* flex-wrap: wrap; */
        flex-flow: column wrap;
      }
      div span{
        width: 150px;
        height: 100px;
        background-color: green;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </body>
</html>

2. 子项属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order 属性定义子项的排列顺序（前后顺序）

2.1 flex 属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0

例子1：两端固定，中间自适应布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      section{
        display: flex;
        margin: 0 auto;
        width: 800px;
        height: 150px;
        background-color: pink;
      }
      section div:nth-child(1){
        width: 100px;
        height: 150px;
        background-color: red;
      }
      section div:nth-child(3){
        width: 100px;
        height: 150px;
        background-color: blue;
      }
      section div:nth-child(2){
        width: 100px;
        height: 150px;
        flex: 1;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <section>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </section>
  </body>
</html>

例子2：等分份数

<style>
section{
display: flex;
margin: 0 auto;
width: 800px;
height: 150px;
background-color: pink;
}
section div:nth-child(1){
width: 100px;
height: 150px;
flex: 1;
background-color: red;
}
section div:nth-child(3){
width: 100px;
height: 150px;
flex: 1;
background-color: blue;
}
section div:nth-child(2){
width: 100px;
height: 150px;
flex: 1;
background-color: green;
}
</style>

2.2 align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示可以继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      section{
        display: flex;
        margin: 0 auto;
        width: 800px;
        height: 450px;
        background-color: pink;
      }
      section div:nth-child(1){
        width: 150px;
        height: 150px;
        background-color: red;
      }
      section div:nth-child(3){
        width: 150px;
        height: 150px;
        align-self: flex-end;
        background-color: blue;
      }
      section div:nth-child(2){
        width: 150px;
        height: 150px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <section>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </section>
  </body>
</html>

2.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样

section div:nth-child(1){
    width: 150px;
    height: 150px;
    background-color: red;
}
section div:nth-child(3){
    width: 150px;
    height: 150px;
    order: -1;
    background-color: blue;
}
section div:nth-child(2){
    width: 150px;
    height: 150px;
    background-color: green;
}