【弹性布局】【设置主轴，交叉轴对齐方式】

实现弹性布局的前提：父元素设置display：flex

1.设置主轴方向：flex-direction

row（默认）：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

colum：主轴为垂直方向，起点在上边

colum-reverse：主轴为垂直方向，起点在下边

2.设置子元素是否换行：flex-wrap

nowarp（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

3.设置主轴的对齐方式：justify-content

flex-start（默认值）：轴起点对齐

flex-end：轴终点对齐

center：居中

space-between：两端对齐，中间元素间隔相等

space-around：每个元素两侧间隔相等

space-evenly：每个元素两侧间隔相等，两边也相等

4.设置交叉轴对齐方式：align-items

flex-start：默认，交叉轴起点对齐

flex-end：交叉轴终点对齐

center：居中

baseline：文本下基线对齐

5.调整换行的排列方式

align-content：flex-start

flex和flex-grow：分配剩余空间或者设置子元素的比例

【弹性布局】【设置主轴，交叉轴对齐方式】相关推荐

VUE-flex布局之align-items交叉轴对齐方式（5）
1.外部容器display:flex: 可以设置的6个属性,如下: flex-direction 元素排列方向 flex-direction: row || ...
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
1.css3弹性盒子 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提 ...
VUE-flex布局之 align-self 单个交叉轴对齐方式（11）
1.外部容器display:flex: 可以设置的6个属性,如下: flex-direction 元素排列方向 flex-direction: row || ...
VUE-flex布局之align-content多交叉轴对齐方式（6）
1.外部容器display:flex: 可以设置的6个属性,如下: flex-direction 元素排列方向 flex-direction: row || ...
[新知速递04] flex布局设置主轴/侧轴对其方式总结梳理
设置主轴方向主轴默认是水平方向, 侧轴默认是垂直方向修改主轴方向属性: flex-direction 属性值作用 row 行, 水平(默认值) column *列, 垂直 row-reverse ...
html里文字垂直对齐属性,word设置文本垂直对齐方式有几种
word设置文本垂直对齐方式有几种左对齐右对齐两端对齐分散对齐居中对齐以上为段落对齐方式,可能不是你要的结果上下两行文本对齐常用方式有用制表位设置段落中制表符的位置后用制表符号来对齐 ...
php设置表格字体对齐方式,Excel 表格字体与对齐方式设置
输入数据后,默认情况下的显示效果是:"常规"格式.11号宋体字.文本左对齐和数字右对齐.而在实际操作中,需要对这些默认的格式进行修改,以满足特定的需要. 设置表格字体输入数据到单 ...
弹性布局的主轴和交叉轴的区别
弹性布局可以让块级元素横向显示,只要设置display:flex;就可以解决,也不会出现高度坍塌的问题. 弹性容器:定义了display:flex的那个元素.容器内部直接子元素进行弹性布局.简单的举个 ...
HTML中用弹性布局设置位置,HTML的flex弹性布局
flex 布局概述 1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好,请放心使用 2. flex 解决了什么问题块元 ...

【弹性布局】【设置主轴，交叉轴对齐方式】

【弹性布局】【设置主轴，交叉轴对齐方式】相关推荐

最新文章

热门文章