CSS3弹性盒布局flex的使用_使用弹性盒首先需要通过什么属性指定外部父元素容器-优快云博客

本文链接：https://blog.youkuaiyun.com/Sponge_bob_/article/details/107874546

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>