彻底搞懂弹性布局flex

最新推荐文章于 2024-04-27 10:05:36 发布

硅谷一姐

最新推荐文章于 2024-04-27 10:05:36 发布

阅读量1.3k

点赞数

分类专栏：网页样式文章标签： css css3 html5

本文链接：https://blog.csdn.net/hlwdt/article/details/121191679

版权

说明：大家在看弹性布局这一块，最好按照从上到下一点一点看，因为上下联系比较紧密。

点击这里，看原文带目录的。

弹性布局基本概念

任何一个容器都可以设置弹性布局，一旦容器设置了弹性布局以后，子元素的float、clear和vertical-align属性将失效。

如果设置容器的水平方向为主轴，则垂直方向为交叉轴。

如果设置容器的垂直方向为主轴，则水平方向为交叉轴。

弹性布局父类容器常用属性

设置容器为弹性布局 display

display：flex 设置块元素为弹性布局

display：inline-flex 设置行内元素为弹性布局

子元素排列方向 flex-direction

flex-direction : row（默认值）

设置容器的水平方向为主轴，垂直方向为交叉轴，起点在左端，子元素在主轴上从左向右排列。

<html>
<head>
    <style>
        .box{
            width: 800px;
            height: 500px;
            border: 5px solid red;
            display: flex;
          	flex-direction: row;
        }
        .boxSelf{
            width: 100px;
            height: 50px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxSelf">1</div>
        <div class="boxSelf">2</div>
        <div class="boxSelf">3</div>
        <div class="boxSelf">4</div>
        <div class="boxSelf">5</div>
    </div>
</body>
</html>

flex-direction : row-reverse

设置容器水平方向为主轴，垂直方向为交叉轴，起点在右端，子元素在主轴上从右向左排列。

flex-direction : column

设置容器垂直方向为主轴，水平方向为交叉轴，起点在上端，子元素在主轴上从上向下排列。

flex-direction : column-reverse

设置容器垂直方向为主轴，水平方向为交叉轴，起点在下端，子元素在主轴上从下向上排列。

最低0.47元/天解锁文章

硅谷一姐

关注

0
点赞
踩
9

收藏

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

说明：大家在看弹性布局这一块，最好按照从上到下一点一点看，因为上下联系比较紧密。点击这里，看原文带目录的。弹性布局基本概念任何一个容器都可以设置弹性布局，一旦容器设置了弹性布局以后，子元素的float、clear和vertical-align属性将失效。如果设置容器的水平方向为主轴，则垂直方向为交叉轴。如果设置容器的垂直方向为主轴，则水平方向为交叉轴。弹性布局父类容器常用属性设置容器为弹性布局 displaydisplay：flex 设置
复制链接

扫一扫