2020-12-24

qq_45489225

于 2020-12-24 20:56:32 发布

阅读量95

点赞数

文章标签： html flex css

本文链接：https://blog.csdn.net/qq_45489225/article/details/111651454

版权

本文详细介绍了Flex布局中flex-direction和justify-content、align-items属性的使用，展示了如何通过空间分布对齐实现不同视觉效果，包括行向布局反转、均匀分布和居中对齐等。

摘要由CSDN通过智能技术生成

Flex布局

在这里插入图片描述

flex container容器属性

flex-direction：row（默认） row-reverse(沿行方向从左往右)
column-reverse：（沿列方向从下往上）

在这里插入图片描述

Justify-content：决定了flex-items在main axios上的对齐方式。
默认值justify-content：flex-start。

当justify-content: flex-end;时，变成右对齐

当调整justify-content: space-between;时，效果如下

当调整justify-content: space-evenly;效果如下

align-items决定了item在交叉轴的对齐方式。

                **aliign-items:center时，效果如下**

在这里插入图片描述

在这里插入代码片
``````html
<!-- flex布局 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div class="Box">
    <div class="item item1">item1</div>
     <div class="item item2">item2</div>
     <div class="item item3">item3</div>
 </div>
<strong>Strong元素</strong>
</body>
<style>
    .Box{
        /* 开启flex布局 inline-flex
        flex : 块级元素 ；  inline-flex：行内元素。
        */
        display:  flex;
        width: 500px;
        height: 300px;
        background-color: #ff0000 ;
        /*flex-direction: row-reverse;*/

        margin: 0 auto;
        justify-content: space-evenly;
        align-items:center;
    }
    .item{
        width: 100px;
        /*height: 100px;*/
        color: white;
        text-align: center;
        /*line-height: 100px;*/
    }
    .item1{
        background-color: yellow;
        height: 100px;
        line-height: 100px;
    }
    .item2{
        background-color: green ;
        height: 150px;
        line-height: 150px;
    }
    .item3{
        background-color: blue;
        height: 200px;
        line-height: 200px;
    }

</style>
</html>



![](https://img-blog.csdnimg.cn/20201224204534800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDg5MjI1,size_16,color_FFFFFF,t_70)

qq_45489225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2020-12-24

Flex布局flex container容器属性flex-direction：row（默认） row-reverse(沿行方向从左往右)column-reverse：（沿列方向从下往上）Justify-content：决定了flex-items在main axios上的对齐方式。默认值justify-content：flex-start。当justify-content: flex-end;时，变成右对齐当调整justify-content: space-between;时
复制链接

扫一扫