CSS-flex布局

最新推荐文章于 2024-10-10 12:14:14 发布

7_35Durant

最新推荐文章于 2024-10-10 12:14:14 发布

阅读量2.1k

点赞数 52

分类专栏： HTML+CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Kevin7_35Durant/article/details/138671215

版权

HTML+CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

flex布局组成（flexible box弹性布局）

display属性值：flex

justify-content (主轴对齐方式)

flex-direction (修改主轴方向)

align-content (行对齐方式)

flex布局组成（flexible box弹性布局）

flex布局又称之为flex容器，它的所有元素自动成为容器成员，称为flex item

它的子元素称之为flex item,子元素可以自动挤压或拉伸
容器存在两根轴：水平的主轴（Main axis)和垂直的交叉轴(Cross axis)。
主轴的开始位置叫Main start,结束位置叫Main end
交叉轴的开始位置叫Cross start,交叉轴的结束位置叫Cross end
单个flex项目占的主轴空间叫Main size,占的交叉轴空间叫Cross size
flex item沿着主轴方向展开

display属性值：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            border: 0px;  
            box-sizing: border-box;  /*将边框和边距包含到宽高*/
        }
      
       .top{
         width: 800px;
         height: 300px;
         border:1px solid black;
         display: flex;
       }
      .top .l{
        width: 300px;
        height: 100px;
        background-color: blue;
  
      }     
     
      .top .r{
        width: 300px;
        height: 100px;
        background-color:pink;
 
      }
 
    </style>
</head>
<body>
    <div class="top"> 
        <div class="l"></div>
       
        <div class="r"></div>
          </div>

</body>
</html>

给父级元素的展示效果设置为flex布局，整个flex容器里面的flex item都会沿着主轴展开

我们给三个盒子的宽设置为300px,父级盒子的宽设置为800px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            border: 0px;  
            box-sizing: border-box;  /*将边框和边距包含到宽高*/
        }
      
       .top{
         width: 800px;
         height: 300px;
         border:1px solid black;
         display: flex;
       }
      .top div{
        width: 300px;
        height: 100px;
        background-color: blue;
  
      }     
 
    </style>
</head>
<body>
    <div class="top"> 
        <div class="l"></div>
        <div class="c"></div>
        <div class="r"></div>
          </div>

</body>
</html>

网页呈现的效果：三个盒子的宽被挤压了

justify-content (主轴对齐方式)

属性：justify-content

属性值说明
flex-start 默认值，flex item 从起点开始依次排序
flex-end flex item 从终点开始排序（并不会改变顺序）
center flex item 沿主轴居中排列
space-between flex item沿主轴均匀排列，空白间距均分在flex item之间
space-around flex item沿主轴均匀排列，空白间距均分在flex item两侧
space-evenly flex item沿主轴均匀排列，flex item与容器间距相等

属性值	说明
flex-start	默认值，flex item 从起点开始依次排序
flex-end	flex item 从终点开始排序（并不会改变顺序）
center	flex item 沿主轴居中排列
space-between	flex item沿主轴均匀排列，空白间距均分在flex item之间
space-around	flex item沿主轴均匀排列，空白间距均分在flex item两侧
space-evenly	flex item沿主轴均匀排列，flex item与容器间距相等

flex-start

flex-end

flex-center

space-between

侧轴对齐方式

属性：

align-items 给容器内所有的flex items设置侧轴对齐方式（给flex 容器设置）
align-self 单独控制某个flex item 设置侧轴对齐方式（给flex items设置）

属性值说明
stretch flex items沿着侧轴线被拉伸至铺满容器（flex items设置了高度则不能拉伸）
center flex items沿侧轴居中排列
flex-start flex items从起点开始依次排序
flex-end flex items从终点开始依次排序

属性值	说明
stretch	flex items沿着侧轴线被拉伸至铺满容器（flex items设置了高度则不能拉伸）
center	flex items沿侧轴居中排列
flex-start	flex items从起点开始依次排序
flex-end	flex items从终点开始依次排序

stretch

如果我没给flex items设置高度，元素就会被拉伸

center

flex-end

flex-direction (修改主轴方向)

主轴默认在水平方向，侧轴默认在垂直方向

属性：flex-direction(修改主轴方向，侧轴也会随着改变)

属性说明
row 水平方向，从左向右（默认）
column 垂直方向，从上到下
row-reverse 水平方向，从右向左
column-reverse 垂直方向，从下到上

属性	说明
row	水平方向，从左向右（默认）
column	垂直方向，从上到下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下到上

row (默认状态)

column

flex (弹性伸缩比)

作用：控制flex items在主轴方向的尺寸

属性：flex

属性值：整数数字，表示占用父级剩余尺寸的份数，默认是1份

给左边一份，中间两份，右边三份

  .box{
         width: 800px;
         height: 300px;
         border:1px solid black;
         display: flex;
         flex-direction:row;
       }
      .box .l{
        width: 200px;
        height: 100px;
        background-color: blue;
        flex:1;
      }     
      .box .c{
        width: 200px;
        height: 100px;
        background-color:pink;
        flex:2; 
      }  
      .box .r{
        width: 200px;
        height: 100px;
        background-color:green;
        flex:3;
      }

网页效果：

flex-wrap (弹性盒子换行)

作用：flex items（弹性盒子）可以自动挤压或拉伸，默认弹性盒子会在一行显示

属性：flex-wrap

属性值：

wrap 换行
no-wrap 默认，不换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
       .box{
         width: 801px;
         height: 300px;
         border:1px solid black;
         display: flex;
         flex-wrap: wrap;
       }
      .box div{
        width: 300px;
        height: 100px;
        background-color:pink;
      }
 
    </style>
</head>
<body>
    <div class="box"> 
        <div class="l">1</div>
        <div class="c">2</div>
        <div class="r">3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
 
          </div>

</body>
</html>

6个弹性盒子并不像默认状态下压缩尺寸，而是换行显示