Flex布局简单介绍

Flex布局

任何一个容器都可以指定为Flex布局

.box{
    display:flex;
}


// 行内元素也可以使用Flex布局
.box{
    display:inline-flex;
}

每个容器都存在水平、垂直交叉的两个轴。

该容器下的所有子元素都会自动成为容器成员,每个子元素称之为 flex项目,所有子元素默认按照主轴排列

容器的属性

### flex-direction
    该属性决定了主轴的方向,既项目的排列方向,可能有四个值:
        ### row   该值为默认值,起点在左端
        ### row-reverse  主轴为水平方向,起点在右端
        ### column  主轴为垂直方向,起点在顶部
        ### column-reverse  主轴垂直方向,起点在底部
        ps:只需要记得 row 与 column 即可 其余两个均为反转方向

### flex-wrap
     该属性是用来判断 容器排列不下时如何换行的
         ### nowrap  该值为默认值,不换行
        ### wrap  换行 第一行在上方
        ### wrap-recerse  换行 第一行在下方

### flex-flow
    该属性为 flex-direction 与 flex-wrap 的缩写
    ### flex-flow: <flex-direction> <flex-wrap>

### justify-content
    该属性定义了项目在主轴上的对齐方式
    ### flex-start 左对齐
    ### flex-end  右对齐
    ### center 居中展示
    ### space-between 两端对齐 项目之前间隔相等
    ### space-around 每个项目两侧的间隔相等 

### align-items
    该属性定义项目在垂直方向上的对齐,垂直(相对于主轴的方向来定)
        ### flex-start 垂直顶部对齐
        ### flex-end  垂直底部对齐
        ### center  可称为居中对齐
        ### baseline  项目的第一行文字的基线对齐
        ### stretch  默认值,如果未设置高度或设置为 auto 占满整个容器高度

### align-content
    该属性定义了多根轴线,如果只有一根轴线 则不起作用
        ### flex-start:与交叉轴的起点对齐。
        ### flex-end:与交叉轴的终点对齐。
        ### center:与交叉轴的中点对齐。
        ### space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
        ### space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
        ### stretch(默认值):轴线占满整个交叉轴。

上面的属性均为容器的属性,也就是容器内的项目的排列的规则

项目属性

### order
    定义项目的排序顺序,数值越小越靠前,默认为0 可为负值

### flex-grow
    当前项目的放大比例,默认为零,既如果存在空间剩余,也不进行放大

### flex-shrink
    可使项目等比例缩小,默认为1,如果不为1,则该项目不缩小,负值无效

### flex-basis


### flex
    该属性是上面三个的简写

### align-self
    该属性允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,等同于stretch

该文章仅为大致整理,详细的请前往 Flex 布局语法教程 进行查看

本博客所有文章如无特别注明均为原创。作者:止语复制或转载请以超链接形式注明转自 止语博客
原文地址《Flex布局简单介绍

相关推荐

发表评论

路人甲
看不清楚?点图切换

网友评论(0)