Java教程

弹性布局学习

本文主要是介绍弹性布局学习,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、弹性盒子

  • 容器盒子里面包含着容器元素,使用 display:flex 或 display:inline-flex 声明为弹性盒子。

元素排列方向

描述
flex-direction:row; 从左到右水平排列元素(默认值)
flex-direction:row-reverse; 从右向左排列元素
flex-direction:column; 从上到下垂直排列元素
flex-direction:column-reverse; 从下到上垂直排列元素

自适应换行

选项 说明
flex-wrap:nowrap; 元素不拆行或不拆列(默认值)
flex-wrap:wrap; 容器元素在必要的时候拆行或拆列。
flex-wrap:wrap-reverse; 容器元素在必要的时候拆行或拆列,但是以相反的顺序

注意flex-flowflex-directionflex-wrap 的组合简写模式

flex-flow: row-reverse wrap-reverse;

元素主轴排列方式

选项 说明
justify-content:flex-start; 元素紧靠主轴起点
justify-content:flex-end; 元素紧靠主轴终点
justify-content:center; 元素从弹性容器中心开始
justify-content:space-between; 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间
justify-content:space-around; 每个元素两侧的间隔相等。元素之间的间隔比元素与容器的边距的间隔大一倍
justify-content:space-evenly; 元素间距离平均分配

元素交叉轴排列方式

选项 说明
align-items:stretch; 元素被拉伸以适应容器(默认值)
align-items:center; 元素位于容器的中心
align-items:flex-start; 元素位于容器的交叉轴开头
align-items:flex-end; 元素位于容器的交叉轴结尾

注意;如果设置了 width | height | min-height | min-width | max-width | max-height ,将影响stretch 的结果,因为 stretch 优先级你于宽高设置。

元素交叉轴多行(flex-wrap:wrap)排列方式

选项 说明
align-content:stretch; 将空间平均分配给元素
align-content:flex-start; 元素紧靠交叉轴起点
align-content:flex-end; 元素紧靠交叉轴终点
align-content:center; 元素从弹性容器中心开始
align-content:space-between; 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间
align-content:space-around; 每个元素两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
align-content:space-evenly; 元素间距离平均分配

单个元素交叉轴排列方式

选项 说明
align-self:stretch; 将空间平均分配给元素
align-self:flex-start; 元素紧靠交叉轴起点
align-self:flex-end; 元素紧靠交叉轴终点
align-self:center; 元素从弹性容器中心开始

自动分配余下空间

用于将弹性盒子主轴的可用空间,分配给弹性元素。flex-grow:1; 可以用小数或整数

空间不足缩小比例

如果全部设置flex-shrink:0; 都不缩小,单个可以整数或者小数设置缩小比例

定义元素基准尺寸宽高

可以是长度单位,也可以是百分比。flex-basis的优先级高于width、height属性,小于max-height,min-height

注意:flex是flex-grow、flex-shrink 、flex-basis缩写组合。flex:1 1 200px;

改变单个元素顺序

用于控制弹性元素的位置,默认为 order:0 数值越小越在前面,可以负数或整数。

这篇关于弹性布局学习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!