Flex布局 在CSS中是当前最流行的布局方式,并且在移动端以及较新的pc浏览器有着很高的支持度,基本上已经可以完全替代传统的 float, inline-block 各种混合的布局方式了。

flex布局因为是比较新的标准,所以在设计之初就着重解决了纵向排布的问题。而之前的css布局方式,对于纵向布局做的比较少。诸如纵向居中对齐、纵向铺满都是需要花费不少力气来处理。

当前的现代浏览器中 flex layout支持度已经超过98%

Flexible box - Can I use


CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。

Container Style 容器样式:

flex可以提供block和inline两种对外效果。但是并不影响内部元素。因为内部元素会被设定为flex项目。

设置一个flex容器:

设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。


.flex{
    display:flex;
    display: -webkit-flex; /* Safari */
}
.inline-flex{
    display:inline-flex;
}
虽然说水平和垂直都可以进行布局,但flex布局在一个层次内只能处理一个方向,多个方向需要嵌套才可以。

/*
    flex-direction  排列方向
    从左往右 - row
    从右往左 - row-reverse
    从上往下 - column
    从下往上 - column-reverse
*/
.flex-direction{
    flex-direction: row;
}

/*
    flex-wrap 换行方式
    nowrap 默认 不换行 持续堆叠,可能会溢出。
    wrap    换行
    wrap-reverse 换行。第一行在反方向
*/
.flex-wrap{
    flex-wrap: nowrap;
}

/*
    flex-flow ( flex-direction, flex-wrap 合并简写 默认 row nowrap )
*/
.flex-flow{
    flex-flow: row wrap-reverse;
}

justify-content

元素的对齐形式 justify-content

/*
    justify-content 对齐形式
    flex-start(默认值):左对齐
    flex-end:右对齐
    center: 居中
    space-between:两端对齐,项目之间的间隔都相等。
    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
*/

align-items

元素在交叉轴上的对齐形式

align-items

/*
align-items 交叉轴对齐形式
    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
*/
.align-items{
    align-items: flex-start;
}

align-content

定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 align-content

/*
align-content 多轴对齐方式
    flex-start:与交叉轴的起点对齐。
    flex-end:与交叉轴的终点对齐。
    center:与交叉轴的中点对齐。
    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值):轴线占满整个交叉轴。
*/

Item Style 元素样式:

排序

/*
order 数字越小越靠前
*/
.flex-order{
    order:1;
}

对flex容器内的元素设置适应参数

/* 
    Flex-grow 增长系数(权重)  
    可以理解为自由计算的bootstrap中 col-机制,flex box的grow越大,在进行分配时获得的比例越大 
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
*/
.flex-grow{
    flex-grow: 1; /* 非负有效数字 0表示不会额外增长 */
}

/*
    Flex-shrink 收缩系数
    类似于flex-grow,但是shrink系数只在容器宽度不够全部元素默认宽度的时候才会发生
    数字越大,收缩的时候越明显
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
*/
.flex-shrink{
    flex-shrink:0.6; /* 非负有效数字 0表示不会被压缩 */
}

/*
    Flex-basis 初始大小
    初始大小的优先级高于 width, height 属性
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
*/
.flex-basis{
    flex-basis: 10px; /* 有效浏览器尺寸或 inherit, unset, initial */
}

/** 简写形式 **/

/* 1个参数 */
.flex-option-one{
    flex:1;      /* 非负有效数字 */
    flex:10px; /* 10%, 10px, 10em ... 有效浏览器尺寸 */
    flex:auto; /* none, auto, initial */ 
}

/* 2个参数 */
.flex-option-two{
    flex: 1 0.5;    /* grow, shrink */
    flex: 1 10px;  /* grow, basis */
}

/* 3个参数 */
.flex-option-three{
    flex: 2 2 10%; /* grow, shrink, basis */
}

align-self 独立对齐方式

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


.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

参考:

flex - css标准草案

CSS 弹性盒子布局 - MDN

flex-MDN

三种布局(盒模型,flex,grid) - 简书 Light_shallow

Flex 布局教程:语法篇 作者: 阮一峰

文章地址:




标签: flex, css3

添加新评论