CSS3弹性盒子

作者: 微语博客 | 来源:发表于2021-06-26 23:43 被阅读0次

CSS3 弹性盒子(Flex Box)
div+css3弹性盒子(flex box)布局
CSS3弹性盒布局方式
CSS3弹性盒布局方式
CSS3 弹性盒子
CSS3 弹性盒子内容
CSS3 弹性盒子(Flex Box)
CSS3弹性布局和多列布局
有一个自适应高度的div，里面有两个div，一个高度为100px
CSS3 弹性盒子(Flex Box)

弹性盒模型

弹性盒模型是CSS3新增的属性，设置display属性值为flex的元素为弹性盒模型对象。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成，弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素。如果元素不是弹性盒模型对象的子元素，则 flex 系列属性不起作用。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3 弹性盒子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{box-sizing: border-box;}
        .flex-wrap{
            display: flex;
        }
        .flex-content{
            background-color: #f0f;
            margin: 10px;
        }
    </style>   
</head>
<body>
    <h2>弹性盒子</h2>
    <div class="flex-wrap">
        <div class="flex-content">android</div>
        <div class="flex-content">java</div>
        <div class="flex-content">html</div>
        <div class="flex-content">css</div>
        <div class="flex-content">javascript</div>
    </div>
</body>    
</html>

弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行。以下元素展示了弹性子元素在一行内显示，从左到右。

排列与对齐

弹性容器常用的排列子元素的属性：

flex-wrap：设置子元素是否可用换行，横向排列下，子元素超出容器换行很有必要。
flex-direction：设置子元素的排列方式。
justify-content：设置横轴上的对齐方式（元素对齐）。
align-content：设置纵轴上的对齐方式（行对齐）。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3 弹性盒子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{box-sizing: border-box;}
        .flex-wrap{
            display: flex;
            /* flex-wrap: wrap; */
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .flex-content{
            background-color: #f0f;
            margin: 10px;
        }
    </style>   
</head>
<body>
    <h2>弹性盒子</h2>
    <div class="flex-wrap">
        <div class="flex-content">android</div>
        <div class="flex-content">java</div>
        <div class="flex-content">html</div>
        <div class="flex-content">css</div>
        <div class="flex-content">javascript</div>
    </div>
</body>    
</html>

常用属性：

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。