flex 布局

最新推荐文章于 2022-11-26 20:18:18 发布

我不爱编程

最新推荐文章于 2022-11-26 20:18:18 发布

阅读量154

点赞数

分类专栏：前端文章标签： flex布局

本文链接：https://blog.csdn.net/weixin_39475476/article/details/103081527

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

今天 有做后端的小伙伴跟我讲 说看不懂阮一峰的flex 布局的文章 我跟他说 ,你先看 多看两遍,然后自己动手试试每个属性的用法,然后在项目中实际的去运用一下,虽说这样,他还是无从下手,所以 我就简单的写了一个页面给他,让他自己琢磨琢磨.以下上常用的flex的布局属性我写了,方便不会的小伙伴直接复制开始着手,如果哪儿 有理解不到位的 欢迎大佬提出来


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<style>
    body{
        width: 100%;

    }
    .father{
        width: 100%;
        display: flex;

        /*
        //定义类名为falter的排列方向  称之为主轴
            1. row（默认值）：主轴为水平方向，起点在左端。
            2.row-reverse：主轴为水平方向，起点在右端。
            3.column：主轴为垂直方向，起点在上沿。
            4.column-reverse：主轴为垂直方向，起点在下沿。
        */
        flex-direction: row;        /*//定义类名为falter的排列方向*/

        /*
          //定义主轴的对齐方式
          1.  flex-start（默认值）：左对齐
           2. flex-end：右对齐
           3. center： 居中
           4. space-between：两端对齐，项目之间的间隔都相等。
           5.space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

        */
        justify-content: space-around;    /*//定义主轴的对齐方式*/



        /*默认情况下，子元素都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

        flex-wrap: nowrap (不换行)| wrap(换行) | wrap-reverse (换行 但是第二行在上面第一行在下面);
        */

        flex-wrap: nowrap;



        /*属性定义父元素中子元素在交叉轴上如何对齐。
            flex-start：交叉轴的起点对齐。
            flex-end：交叉轴的终点对齐。
            center：交叉轴的中点对齐。
            baseline: 项目的第一行文字的基线对齐。
            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

        */
        align-items: flex-end;



    }

    .son{
        width: 200px;
        height: 200px;
        background: #39739B;
        text-align: center;
        line-height: 200px;

        /*order属性定义子元素的排列顺序。数值越小，排列越靠前，默认为0。
        order:2

        */
    }

    .order{
        order: 1;

        /*flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大
        但是 设置的值越大 它占的剩余空间就越多
       flex-grow:1

        */
        /*

        flex-shrink
        属性定义了子元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大 缩小的倍数越大
        */
    }




</style>

<body>

<div class="father">
    <div class="son">
        我是子元素1
    </div>

    <div class="son order">
        我是子元素2
    </div>
    <div class="son">
        我是子元素3
    </div>
    <div class="son">
        我是子元素4
    </div>
    <div class="son">
        我是子元素5
    </div>

</div>



</body>
</html>

我不爱编程

关注

0
点赞
踩
1

收藏

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

今天有做后端的小伙伴跟我讲说看不懂阮一峰的flex 布局的文章我跟他说 ,你先看多看两遍,然后自己动手试试每个属性的用法,然后在项目中实际的去运用一下,虽说这样,他还是无从下手,所以我就简单的写了一个页面给他,让他自己琢磨琢磨.以下上常用的flex的布局属性我写了,方便不会的小伙伴直接复制开始着手,如果哪儿有理解不到位的欢迎大佬提出来<!DOCTYPE html>...
复制链接

扫一扫