CSS3弹性盒布局flex的使用

CSS中的弹性盒布局(flex)

1.弹性和布局的基础知识
在这里插入图片描述
弹性盒布局中有两个互相垂直的坐标轴:一个称之为主轴(main axis),另外一个称之为交叉轴(cross axis)。主轴并不固定为水平方向的 X 轴,交叉轴也不固定为垂直方向的 Y 轴。main axis和cross axis的方向可以根据实际情况通过相关属性进行调整。(图中展示的为默认情况下的方向)
2.弹性盒中的元素以及属性

<div class="container">
	<div class="item item1"></div>
	<div class="item item2"></div>
	<div class="item item2"></div>
</div>

以上代码中,.container为父容器,在使用弹性盒布局时首先要为父容器设置如下代码:

.container{
	display:flex
	/*也可以设置为inline-flex,具体不同之处下面会进一步说明*/
}

下面通过代码对display的flex与inline-flex的效果进行展示。

<div class="container">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
</div>
<strong>Strong为行内元素</strong>

首先将.container中的display设置为flex,效果如下:
从图中可以看出,父级容器单独占一行显示。

在这里插入图片描述

接下来将display设置为inline-flex,显示效果如下:
父容器和平级的行内元素显示在同一行上,可以理解为inline-flex设置的父元素具有行内元素的特征。
在这里插入图片描述
3.弹性盒布局的具体使用方法
(详细说明在注释中给出)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .box {
        /* display: inline-flex; */
        display: flex;
        /* 决定主轴方向 row,row-reverse,column,column-reverse*/
        /* flex-direction: column-reverse; */

        /* 决定flex items在main items上的对齐方式 */
        /* justify-content: flex-start;默认值,与main start对齐 */
        /* justify-content: flex-end; */
        /* justify-content: center;居中对齐 */
        /* justify-content: space-between;与mian start和main end两端对齐,flex item之间距离相等 */
        /* justify-content: space-evenly; ,flex items与mian start,main end之间的距离等于flex-item之间的距离*/
        /* justify-content: space-around;felx-items与flex start,flex end之间的距离是flex items之间距离的一半 */

        /* align-items决定在cross axis上的对齐方式 */
        /* align-items: normal; flex-start,flex-end,center,baseline*/
        /* align-items: center; */

        /* flex-wrap,默认情况下所有的flex-items在同一行,不会换行 */
        /* flex-wrap: wrap;自动换行 wrap-reverse*/
        /* flex-wrap: wrap; */

        /* flex-flow缩写属性flex-direction|flex-wrap */
        
        /* align-content决定多行flex items在交叉轴上的对齐方式 */
        /* align-content: flex-start;依次排开,中间不留空间 */
        /* align-content: space-between; */
        /* align-content: space-evenly;space-around */
        
        width: 500px;
        height: 400px;
        background-color: #eaeaea;
    }
    .item{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }
    .item1{
        background-color: #f00;
        /* 决定flex-items排列顺序,从小到大呈现 */
        /* order: 10; */
        /* flex-grow分配剩余空间,小数表示分得剩余空间的百分比 */
        /* flex-grow: 1;默认值0 */
        /* flex-shrink: ; 默认值1*/
        /* flex-basis: 200px;设置主轴方向上单个flex-item的大小 */
    
        /* flex是flex-grow|flex-shrink|flex-basis的简写 */
    }
    .item2{
        background-color: #0f0;
        /* order: 6; */
        /* height: 150px; */
        /* flex-grow: 1; */
    }
    .item3{
        background-color: #00f;
        /* order: 100; */
        /* align-self: flex-end;单独决定cross-item的对齐方式,覆盖父元素中的align-items */
        /* flex-grow: 1; */
    }
</style>
</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>
</html>

效果如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值