弹性布局学习

2022/1/27 6:04:47

编程Tag： 元素布局容器 content 弹性学习 flex wrap align

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

一、弹性盒子

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

注意：flex-flow 是 flex-direction 与 flex-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-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;	元素间距离平均分配

用于将弹性盒子主轴的可用空间，分配给弹性元素。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 数值越小越在前面，可以负数或整数。

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