共计 1722 个字符,预计需要花费 5 分钟才能阅读完成。
目前纯文字描述,后期补上图片说明
概念
- 主轴:main-axis,默认横向的轴
- 交叉轴:cross-axis,默认纵向的轴,有的称为侧轴,与主轴 90°中心旋转交叉
弹性布局的结构
<div class="flex-container"><!-- 容器 -->
<div class="flex-item">1</div><!-- 项目 -->
<div class="flex-item">1</div><!-- 项目 -->
</div>
容器 css
.flex-container{
/* 主轴方向:row 行(横向)| row-reverse 反向行 | column 列(纵向)| column-reverse 反向列 */
flex-direction: row;
/* 换行:nowrap 不换行 | wrap 换行 | wrap-reverse 反向换行(往上换行)*/
flex-wrap: nowrap;
/* 以上两者的简写 */
/*flex-flow: <flex-direction> || <flex-wrap>;*/
/*
主轴的对齐方式:flex-start 主轴起点对齐(横向是左对齐,纵向是上对齐)flex-end 主轴终点对齐
center 主轴中点对齐
space-between 两端对齐
space-around 两端对齐,每个项目两侧的间隔相等并向中间靠拢
*/
justify-content: flex-start;
/*
交叉轴的对齐方式:flex-start | flex-end | center
baseline 项目的第一行文字的基线对齐
stretch 拉长,如果项目未设置高度或设为 auto,将占满整个容器的高度
*/
align-items: stretch;
/*
多根轴线时交叉轴对齐方式(换行时可产生多根轴线,不换行只有一根轴线此值无效):flex-start | flex-end | center
space-between 两端对齐
space-around 两端对齐,每个轴线两侧的间隔相等向中间靠拢
stretch 拉长,所有轴线占满整个容器
*/
align-content: stretch;
}
项目 css
.flex-item{
/* 排列顺序:数值越小,排列越靠前,默认为 0 */
order: 0;
/* 放大比例,与有设置该值的项按比例放大并占满空间,默认为 0 即如果存在剩余空间,也不放大 */
flex-grow: 0;
/* 缩小比例,项目在主轴总宽度超出 100% 对当前项按比例缩小,默认为 1 即如果空间不足,该项目将缩小。*/
flex-shrink: 1;
/*
起始值,分配多余空间前的初始长度(主轴横向时是宽度)【width/height 可用的长度值,如 1px/1em/1rem/auto/30% 等】浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即项目的本来大小。*/
flex-basis: auto;
/* 以上三者的简写 */
/*flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>];*/
/*
语法糖解析://none 快捷键
flex:none = flex:0 0 auto
// 数字 (grow,shrink=1,basis=0)
flex:2 = flex:2 1 0
// 数字,数字 (grow,shrink,basis=0)
flex:2 3 = flex:2 3 0
// 非数字 (grow=1,shrink=1,basis)
flex:30px = flex:1 1 30px
flex:30% = flex:1 1 30%
flex:auto = flex:1 1 auto
// 数字,非数字 (grow,shrink=1,basis)
flex:2 30px = flex:2 1 30px
flex:2 30% = flex:2 1 30%
flex:2 auto = flex:2 1 auto
// 数字,数字,非数字 (grow,shrink,basis)
flex:2 3 30px
flex:2 3 30%
flex:2 3 auto
*/
/*
自身对齐方式:auto | flex-start | flex-end | center | baseline | stretch
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch
*/
align-self: auto;
}
正文完