CSS3 细说Flex布局

最新推荐文章于 2024-09-28 19:03:07 发布

猎剑

最新推荐文章于 2024-09-28 19:03:07 发布

阅读量163

点赞数

文章标签：前端开发 flex布局

本文链接：https://blog.youkuaiyun.com/weixin_42393089/article/details/99078605

版权

本文深入讲解Flex布局的基础语法与高级应用，包括父元素与子元素的属性设置，如display、flex-direction、flex-wrap等，以及如何通过实例代码理解justify-content、align-items等属性的使用，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.基础语法

语法

父元素{
display:flex;
flex-direction:决定主轴的方向;
flex-wrap:是否换行;
flex-flow: flex-direction, flex-wrap;
jusity-content:子元素的主轴对齐方式;
align-item:子元素的侧轴对齐方式;
aligin-content:多轴线的对齐方式
}
子元素{
flex: flex-grow,flex-shrink,flex-basis;
flex-grow:放大比列;
flex-shrink:缩小比列;
flex-basis:伸缩基准值;
order：排序;
align-self:单个项目的对齐方式
}

说明：默认情况下的轴向
在这里插入图片描述

二.详细解说

在这里插入图片描述

flex-grow：根据比列分配盒子剩余空间

在这里插入图片描述

flex-grow布局技巧

在这里插入图片描述

flex-shrink

在这里插入图片描述

计算公式：盒子400px; 三个子元素200px; 多出200px;
缩减的宽度=(flex-shrink1 * width1) /( flex-shrink1 * width1 + flex-shrink2 * width2) * moreWidth

flex-basis和order

在这里插入图片描述

align-self

在这里插入图片描述
默认情况下auto会继续父元素的对齐方式，如果没有父元素等同于stretch

flex-direction：定义轴的方向

在这里插入图片描述

flex-wrap

在这里插入图片描述

justify-content 及align-item

在这里插入图片描述

三本次案列代码

<!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>flex</title>
    <style>
        .wrapper{
        display: flex;
         border: 1px solid black;
         width: 400px;
         height: 400px;
         /* align-content: flex-start | flex-end | center | space-between | space-around | stretch; */
         /* align-content: flex-end; */
         /* 如果只有一根轴线起不了作用 */
         /* flex-start：与交叉轴的起点对齐。
         flex-end：与交叉轴的终点对齐。
       center：与交叉轴的中点对齐。
        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
         stretch（默认值）：轴线占满整个交叉轴。 */


         /* justify-content: flex-start | flex-end | center | space-between | space-around; */
         /* align-items: flex-start | flex-end | center | baseline | stretch; */
         /* justify-content: space-between; */
         /* align-items: ; */
         /* flex-wrap: wrap; */
         /* flex-direction：row | row-reverse | column | column-reverse */
         /* flex-wrap：nowrap（默认） | wrap | wrap-reverse    */
         /* flex-direction: column; */

     
        }
        .wrapper .item{
            border: 1px solid black;
            width: 50px;
            /* flex-grow: 1; */
            /* align-self:stretch */
            /* flex-basis: 10px; */
            
        }
        .wrapper .item1{
            /* flex-grow: 1; */
            /* flex-shrink: 1; */
            /* order: 1; */
            /* align-self: auto | flex-start | flex-end | center | baseline | stretch */
           
         
            
            
             
        }
        .wrapper .item2{
            /* flex-grow: 1; */
            /* flex-shrink: 2; */
            /* order: 3; */
            
        }
        .wrapper .item3{
          /* flex-grow: 1; */
          /* flex-shrink: 1; */
          /* order: 2; */
            
        }
        
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>
</html>