1.flex布局
<div class="content">
<div class="left">left</div>
<div class="mid">mid</div>
<div class="right">right</div>
</div>
样式：
.content {
/**
flex布局作用于父节点的属性有
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
*/
display: flex;
/**父级节点使用flex子节点则会变成行内元素*/
flex-direction: row;
/**决定主轴的方向
row 主轴起点在左边
row-reverse 主轴起点在右边
column 主轴起点在顶部
row-reverse 主轴起点在底部
*/
flex-wrap: nowrap;
/**
一行显示不下时换行规则
nowrap 不换行
wrap 换行
wrap-reverse 反方向换行
*/
justify-content: center;
/**
默认为水平方向的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
*/
flex-grow: row nowrap;
/**
flex-direction和flex-wrap的缩写形式
*/
align-items: center;
/**默认为垂直方向的对齐方式
center 居中
flex-start 默认情况下起点是顶部
flex-end 默认情况起点在底部
stretch 如果子元素未设置高度或者高度为
auto，则子元素撑满父元素高度
baseline 基于子元素第一行文案对齐
*/
align-content: center;
/**
多行主轴对齐方式
flex-start：底部对齐
flex-end：顶部对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
*/
height: 100%;
}
/**
子元素属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
*/
.left {
width: 200px;
background-color: aqua;
order: 0;
flex-grow: 0;
flex-shrink: 0;
/**
设定排序顺序
默认0: 数值越小越靠前
*/
}
.mid {
width: 100%;
background-color: bisque;
order: 2;
flex: 0 0 auto;
/**
flex-grow, flex-shrink, flex-basis 的缩写
简写 auto (1 1 auto) none (0 0 auto)
*/
align-self: auto;
/**
设置单个元素的对齐方式
center 居中
flex-start 默认情况下起点是顶部
flex-end 默认情况起点在底部
stretch 如果子元素未设置高度或者高度为
auto，则子元素撑满父元素高度
baseline 基于子元素第一行文案对齐
*/
}
.right {
width: 100px;
background-color: aqua;
order: 1;
flex-grow: 0;
/**
设置放大规则为0则不放大
放大规则
默认为0 不放大
设置对应的数值
则在存在剩余空间时放大多少倍
*/
flex-shrink: 0;
/**
设置缩放规则为0则为不缩放
*/
flex-basis: 200px;
/**
设置子元素宽度
优先级大于width
**/
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
