自学内容网 自学内容网

css弹性布局flex

css

弹性布局

  • flex布局,弹性布局,代替float,针对div容器

    任何一个容器都可以指定为Flex布局。

    flex布局的使用步骤:
    1、开启flex布局,display:flex; 布局块级元素
    display: inline-flex;布局行内元素
    2、设置主轴方向,默认的主轴是横向,
    flex-direction

    ​ 3、设置侧轴(交叉轴): align-items

注意:行内元素也可以使用Flex布局。以下写法代表将display:inline和display:flex结合起来

/* 启用弹性布局,并变为行内元素 */
.box{
  display: inline-flex;
}

注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

  • flex-direction属性

    flex-direction属性决定主轴的方向(即项目的排列方向)。

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }
    

    它可能有4个值。

    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。
  • flex-wrap属性

    默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    

    它可能取三个值。

    (1)nowrap(默认):不换行。

    (2)wrap:换行,第一行在上方。

    (3)wrap-reverse:换行,第一行在下方。

    在这里插入图片描述

  • justify-content属性

    justify-content属性定义了项目在主轴上的对齐方式。也就是水平对齐。

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    }
    
    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    • space-evenly:平均对齐,在CSS3后续才加入的,是平均对齐
  • align-items属性

    align-items属性定义项目在交叉轴上如何对齐。也就是当前行的垂直对齐,分行对齐。

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }
    

    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。重点
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  • align-content属性

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。也就是垂直对齐,不分行对齐。

    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    

    该属性可能取6个值。

    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。

    在这里插入图片描述

flex-wrap&&align-content案例

    <style>
        .div1 {
            width: 500px;
            height: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            /* 设置换行 */
             flex-wrap:wrap; /*nowrap:不换行,wrap:换行*/
             justify-content: center;
             /* align-items: center; */
             align-content: center;
        }
        .div1 .div1-1 {
            width: 150px;
            height: 150px;
            background-color: lime;
        }
        .div1 .div1-2 {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .div1 .div1-3 {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
         
    </style>
</head>
<body>
    
    <div class="div1">
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
    </div>

     
</body>

综合案例:

    <style>
        .div1 {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            box-sizing: border-box;
            /* 开启flex布局 */
            display: flex;
            /* 设置主轴方向 */
            flex-direction: row; /* row:默认,横向,column:纵向*/
            /* 设置主轴对齐方式 */
            /*
            flex-start:左对齐 ,
            flex-end:右对齐
            center:居中
            space-between:两端对齐
            space-around:两端留白对齐
            space-evenly:等距离留白对齐
            */
            justify-content:space-evenly;
            
            /* 设置侧轴 */
            align-items:center;
        }
        .div1 .div1-1 {
            width: 150px;
            height: 150px;
            background-color: lime;
        }
        .div1 .div1-2 {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .div1 .div1-3 {
            width: 150px;
            height: 150px;
            background-color: pink;
        }
        .div2 {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            /* 开启flex布局 */
            display: inline-flex;
            /* 设置主轴方向 */
            flex-direction: row;
            /* 设置主轴对齐方式 */
            justify-content: space-evenly;
            /* 设置侧轴 */
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- 讲解flex布局,弹性布局,代替float,针对div容器 -->
    <!-- 
        flex布局的使用步骤: 
        1、开启flex布局,display:flex; 布局块级元素
                display: inline-flex;布局行内元素
        2、设置主轴方向,默认的主轴是横向,
            flex-direction

        3、设置侧轴(交叉轴): align-items


    -->
    <div class="div1">
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
        <div class="div1-1">dfds</div>
        <div class="div1-2">fdf</div>
        <div class="div1-3">fdsfsd</div>
    </div>

    <div class="div2">
        <a href="#">龙哥卷发</a>
        <a href="#">明明看龙哥</a>
        <a href="#">磊哥怎么想</a>
    </div>

</body>

项目的属性

  • order属性

    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

  • flex-grow属性(重点)

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

  • align-self属性

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

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    
  • align-self属性

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

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    

在这里插入图片描述

综合案例:

    <style>
        /* div {
            width: 800px;
            height: 200px;
            background-color: antiquewhite;
            display: inline-flex;
            justify-content: space-between;
        }
        div a:nth-child(7) {
            order: -1;
        }
        div a:first-child {
            order: 1;
        } */
        .div1 {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .div1 .div1-1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            flex-grow: 1;
        }
        .div1 .div1-2 {
            width: 100px;
            height: 100px;
            background-color: lime;
            /* 分配剩余空间(大小) */
            flex-grow: 2; /* 把剩余的宽度全部给你*/
            align-self: flex-end;
        }
        .div1 .div1-3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <!-- flex其他属性 -->
    <!-- <div>
        <a href="#">发现音乐</a>
        <a href="#">我的音乐</a>
        <a href="#">关注</a>
        <a href="#">商城</a>
        <a href="#">音乐人</a>
        <a href="#">云推歌</a>
        <a href="#">下载客户端</a>
    </div> -->

    <div class="div1">
        <div class="div1-1"></div>
        <div class="div1-2"></div>
        <div class="div1-3"></div>
    </div>
</body>

 href="#">发现音乐</a>
        <a href="#">我的音乐</a>
        <a href="#">关注</a>
        <a href="#">商城</a>
        <a href="#">音乐人</a>
        <a href="#">云推歌</a>
        <a href="#">下载客户端</a>
    </div> -->

    <div class="div1">
        <div class="div1-1"></div>
        <div class="div1-2"></div>
        <div class="div1-3"></div>
    </div>
</body>

原文地址:https://blog.csdn.net/ZWJAS/article/details/135432696

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!