flex弹性布局

最新推荐文章于 2024-08-04 20:38:28 发布

菜根花小宝贝

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量184

点赞数

分类专栏：网页学习文章标签： css3 flex

本文链接：https://blog.csdn.net/qq_45493915/article/details/105811932

版权

网页学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

flex弹性布局

（一）初识flex

ﬂex布局是什么？
Flex意思是弹性布局，是css3中的新布局模块，用来为盒模型提供最大的灵活性。可改进容器中的项⽬目对齐，⽅向和顺序，即使他们具有动态甚至是未知⼤小。Flex容器能够调节子节点的宽度或高度，以便适应不同的屏幕尺⼨。
基本概念
ﬂex布局可以将一个元素看成一个容器，⽗元素下的⼦元素会自动成为子容器，这样就构成⼀个 ﬂex项目。
容器存在两根轴：⽔平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴开始的位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .flexTest {
      display: flex;
    }
  </style>
</head>
<body>
  <div class="flexTest">
    <div>html5</div>
    <div>css3</div>
    <div>js</div>
  </div>
</body>
</html>

（二）ﬂex布局容器六大属性

1.ﬂex-direction

ﬂex-direction属性决定主轴的方向

值	描述
row	默认值。主轴为水平⽅向，起点在左边。
row-reverse	主轴为水平⽅向，起点在右边。
column	主轴为垂直方向，起点在上面。
column-reverse	主轴为垂直方向，起点在下面。

2.ﬂex-wrap和ﬂex-ﬂow

ﬂex-wrap属性设置⼦项目的换行方式

值	描述
nowrap	默认值。不换行
wrap	换⾏，从上往下排列，第⼀⾏在上⽅。
wrap-reverse	换⾏，从下往上排列，第⼀行在下方。

ﬂex-ﬂow属性是ﬂex-direction属性和ﬂex-wrap属性的简写⽅方式，默认值是row nowrap。
语法：flex-flow: < flex-direction> || < flex-wrap>;

3.justify-content

justify-content属性设置⼦项目在主轴上的对齐方式。

值	描述
ﬂex-start	默认值。左对⻬
ﬂex-end	右对齐
center	居中
space-between	两端对⻬，⼦项⽬之间间隔⼀样
space-around	每个子项⽬两侧的间隔⼀样。

4.align-items

align-items属性规定⼦项⽬在交叉轴上的对⻬⽅式

值	描述
ﬂex-start	交叉轴的起点对⻬
ﬂex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	以子项目的第⼀⾏⽂字为基线对齐
stretch	默认值。如果项目未设置固定高度，将占满整个容器的高度。

5.align-content

align-content多行情况下的对⻬⽅式，类似justify-content的对齐方式

值	描述
ﬂex-start	与交叉轴的起点对齐
ﬂex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space- between	与交叉轴的两端对齐，每⾏之间隔⼀样
space- around	每行上下的间隔⼀样
stretch	默认值。未设置⾼度将占满整个空间，如设置的高度不够则每⾏下⽅填充空⽩填满容器

（三）ﬂex弹性布局-项目属性

1.order和ﬂex-grow

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .flexTest {
      display: flex;
    }
    .item {
      min-width: 100px;
      /* height: 100px; */
      flex-grow: 1;
      margin: 10px;
      padding: 10px;
      background: #c3c3c3;
    }
    .item1 {
      /* order: 3; //规定子容器排序顺序，越小越靠前，默认0 */
    }
    .item2{
      /* order: 2; */
      flex-grow: 3;//子容器放大比例，默认为0，剩余空间不足则不会放大，如果都为1，等分剩余空间
    }
    .item3 {
      /* order: -1; */
    }
  </style>
</head>
<body>
  <div class="flexTest">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

2.ﬂex-shrink

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .flexTest {
      display: flex;
      width: 600px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background: #c3c3c3;
    }
    .item2,.item3 {
      flex-shrink: 2;//规定子容器缩小比例，默认为1，如果空间不足将缩小，若都为1，等比例缩小
    }
  </style>
</head>
<body>
    <div class="flexTest">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
      </div>
</body>
</html>

3.ﬂex-basis和ﬂex

ﬂex-basis属性可修改子容器占据的主轴空间的⼤小。默认值为auto，即⼦容器的本来⼤小

.item{
flex-basis:<length> | auto;
}

ﬂex属性是ﬂex-grow，ﬂex-shrink和ﬂex-basis的简写，默认值是0 1 auto，后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性设置auto等同于（1 1 auto），none等同于（0 0 auto）

4.align-self

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .flexTest {
      display: flex;
      height: 500px;
      align-items: flex-end;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background: #c3c3c3;
    }
    .item1 {
      align-self: flex-start;//align-self属性允许单个子容器与其他⼦容器有不⼀样的对齐⽅式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。
    }
    .item2 {
      align-self: center;
    }
  </style>
</head>
<body>
  <div class="flexTest">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

菜根花小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局

flex弹性布局（一）初识flex（二）ﬂex布局容器六大属性1.ﬂex-direction2.ﬂex-wrap和ﬂex-ﬂow3.justify-content4.align-items5.align-content（三）ﬂex弹性布局-项目属性1.order和ﬂex-grow2.ﬂex-shrink3.ﬂex-basis和ﬂex4.align-self（一）初识flexﬂex布局是什么？...
复制链接

扫一扫

专栏目录