FlexBox布局教程和实例介绍

最新推荐文章于 2021-01-30 08:51:28 发布

Deft_MKJing宓珂璟

最新推荐文章于 2021-01-30 08:51:28 发布

阅读量652

点赞数

分类专栏： VueJS和Weex相关文章标签： Flex-box 弹性盒布局 flex属性前端布局 flexbox

本文链接：https://blog.csdn.net/Deft_MKJing/article/details/80401164

版权

VueJS和Weex相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

CSS 长期以来缺乏合适的布局机制。变形，动画，滤镜，对这门语言来说都很有用，但是都没有解决 Web 开发者长期抱怨的主要问题。几行Flex代码搞定布局，有必要学习记录一下

介绍容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-conten

可以用inline-block和float让他水平排列，这里用Flex来做

display: flex;

flex-direction

flex-wrap

元素超过父容器尺寸时是否换行

下面的例子是flex-direction=row

flex-flow : flex-direction | flex-wrap

同时设置flex-direction 和 flex-wrap

justify-content

子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式

也就是说，容器设置row之后，内部元素布局后，这个属性是让内部整体属性的分布方式

flex-start 整体子元素靠左类似float left
flex-end 整体子元素靠右
center 整体子元素居中
space-between 第一个和最后一个顶格，其他元素均分布局

space-around 第一个子元素靠左的间距和最后一个元素靠右的间距，是中间子元素间距的一半中间的元素还是等分间距

下图中有margin，因此没有顶边

aligns-items

子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式

flex-start 整体垂直靠上
flex-end 整体垂直靠上
center 整体垂直居中
baseline 容器子元素内的文字底部对齐，如果文字大小不同，因此子元素可能会高度参差不齐
stretch 如果子元素不设置高度，高度被拉伸至父元素高度相同除去自身的margin
如果flex-direction是row那么是上面的理解，如果是column，那么如果宽度没有设置，宽度会被拉伸至父元素的宽度

row的情况下，如果没有设置子元素的宽度和高度，默认stretch会拉伸和父元素一样高，影响的是垂直方向

column的情况下影响的就是水平方向了，下面看下stretch对应的横向拉伸

align-content

设置多行子元素在行方向上的对齐方式,注意这个是wrap有换行多行的情况下，单行是不起作用的

换行的前提都是垂直的
flex-start 多行整体向上排列
flex-end 多行整体向下排列
center 多行整体居中
space-between 最后一行和第一行顶格，其他元素垂直均分
space-around 第一行靠上和最后行靠下的间距，是其他中间行数间距的一半

介绍容器内部item属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

子元素中设置order属性，排列的时候会根据order大小排序

body ul:nth-child(1) li:nth-child(1){
			order: 10;
		}
		body ul:nth-child(1) li:nth-child(2){
			order: 20;
		}
		body ul:nth-child(1) li:nth-child(3){
			order: 3;
		}
		body ul:nth-child(1) li:nth-child(4){
			order: 4;
		}
		body ul:nth-child(1) li:nth-child(5){
			order: 5;
		}

flex-grow

表示的是当父元素有多余的空间时，这些空间在不同子元素之间的分配比例

0代表保持原先样子

flex-shrink

和grow一样的，只是这个是如果子元素过大，按比例缩小的时候每个item对应的比例

flex-basis

定义了分配在多余空间之前，项目占据的主轴控件，一般都不会动他，默认auto，项目原本大小

align-self

表示父级容器设置好的时候，该属性能够脱离父级属性进行脱离

flex

flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

同时设置flex-grow 和 flex-shrink 以及 flex-basis

该属性有两个快捷键 auto(1 1 auto) 和 none （0 0 auto）

实例介绍

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {
        background-color: white;
        border: 1px solid black;
        width: 210px;
        height: 210px;
        margin: 100px auto;
        display: flex;
        flex-direction: column;
    }

    .box .row{
      background-color: red;
      height: 33.333%;
    }
    .box div:nth-child(1){
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .box div:nth-child(2){
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .box div:nth-child(3){
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .sp {
        margin: 10px;
        width: 50px;
        height: 50px;
        background-color: black;
        border-radius: 30px;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="row">
            <span class="sp"></span>
            <span class="sp"></span>
            <span class="sp"></span>
        </div>
        <div class="row">
            <span class="sp"></span>
        </div>
        <div class="row">
            <span class="sp"></span>
            <span class="sp"></span>
        </div>
    </div>
</body>

</html>

具体的实例可以参考下面的链接，基本逻辑都是上面介绍的思路

骰子实例

flex-box Demos

flex-box小游戏