flex盒子布局 - 通过主轴和侧轴学习对齐方式

最新推荐文章于 2024-10-08 10:54:18 发布

⑥②

最新推荐文章于 2024-10-08 10:54:18 发布

阅读量2.8k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/lw001x/article/details/103699569

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS Flexible Box Layout 就是css的弹性盒子布局，简称flex布局，相对于box布局来说，功能更多一些，使用起来也相对灵活。

先了解一下方向轴的概念

主轴（main axis）和侧轴（cross axis），其中侧轴也可以翻译成交叉轴。

主轴和侧轴的定义是通过定义flex-direction属性得来的，也就是说，你定义flex-direction为row 或 row-reverse，那么主轴方向就是横轴，x轴。如果你定义flex-direction为column 或 column-reverse，那么你的主轴方向就是纵轴，y轴。

In this image the flex-direction is row which forms the main axis

了解主轴和侧轴的关系，有助于学习flex盒子布局的对齐方式，在阅读文档时也会有所帮助。

与主轴侧轴方向相关的对齐属于有哪些？

align-content 【容器】堆栈伸缩行，flex-wrap为nowrap时，该样式无效
align-items 【容器】侧轴上项目对齐方式
align-self 【元素】侧轴上单个项目对齐方式
just-content 【容器】主轴对齐

align-content

定义在容器上的属性，控制侧轴方向上内容的对齐方式。

示例代码：http://jsrun.pro/yrWKp

注：该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap），flex-wrap默认的属性就是nowrap，所以我们在学习align-content的时候要注意，一定要将flex-wrap的默认值改掉。

align-items

定义在容器上的属性，align-self的容器层面的属性，与align-self效果一致。

align-self

定义在元素上的属性，控制单个元素的对齐方式，覆盖容器上align-items的属性值。

just-content

定义在容器上的属性值，控制容器主轴方向上内容的对齐方式。

示例代码

可以看到下面的示例图片中，头像与右边的信息是横向展示，网名文字和QQ图标用了居中对齐。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用flex布局的列表页面</title>
    <style>
        .list {

        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: stretch;

            flex-wrap: nowrap;

            border-bottom:1px solid #f0f0f0;

            padding:10px;
            box-shadow: 0px 0px 1px 0px rgba(255,0,0,.3);
            margin-bottom:10px;
        }
        .avatar .image{
            width: 80px;
            height: 80px;
            display: block;
            border-radius: 40px;
            box-shadow: 0px 0px 7px 0px rgba(0,0,0,.5);

            margin-right:10px;
        }
        .detail{
            font-size:14px;
            color:#636363;
        }
        .name{
            display:flex;
            align-items: center;
            margin-bottom:5px;
        }
        .text{
            font-size:16px;
        }
        .icon{
            height:30px;
            display:block;
        }

    </style>
</head>
<body>

<div class="list">
    <div class="item">
        <div class="avatar">
            <img class="image" src="http://img3.imgtn.bdimg.com/it/u=1368451564,780267377&fm=11&gp=0.jpg" style=""/>
        </div>
        <div class="info">
            <div class="name">
                <div class="text">
                    独守空城忆旧梦
                </div>
                <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
            </div>
            <div class="detail">
                任何时候都要记得，给人生留点余地，得到时不自喜，失去时不抑郁。留一点好处让别人占，留一点道路让别人走，留一点时间让自己思考。
            </div>
        </div>
    </div>

    <div class="item">
        <div class="avatar">
            <img class="image" src="http://img0.imgtn.bdimg.com/it/u=4009057249,2530456353&fm=26&gp=0.jpg" style=""/>
        </div>
        <div class="info">
            <div class="name">
                <div class="text">
                    对你微笑纯粹出于礼貌ˇ
                </div>
                <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
            </div>
            <div class="detail">
                胆量不够大，能力再强都是小人物！魄力不够大，努力一生都是小成就！在成长的路上，我们突破的不是现实，而是自己。在人生的跑道上，战胜对手，只是赛场的赢家，战胜自己，才是命运的强者。
            </div>
        </div>
    </div>
    <div class="item">
        <div class="avatar">
            <img class="image" src="http://img0.imgtn.bdimg.com/it/u=1813762643,1914315241&fm=26&gp=0.jpg" style=""/>
        </div>
        <div class="info">
            <div class="name">
                <div class="text">
                    ☆⌒糖罐子℡
                </div>
                <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
            </div>
            <div class="detail">
                不忘初心，方得始终。只有走过弯路，才更确信当初最想要的是什么。有些事，想多了头疼，想通了心疼。人生旅途，不是每一段旅行都要邂逅，也不是每一段生命都需要故事，就算多数时间都是一个人孤单且平淡在走，只要足够有爱，就不会寂寞。
            </div>
        </div>
    </div>
</div>
</body>
</html>