作者：周周微商互联 | 来源：互联网 | 2023-08-20 20:50
弹性盒子可以控制内部元素的布局display:flex元素成为弹性容器，他的子元素成为弹性子元素弹性子元素像块级元素一样填充可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性
弹性盒子可以控制内部元素的布局display:flex
元素成为弹性容器，他的子元素成为弹性子元素
弹性子元素像块级元素一样填充可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，高度由他们的内容决定。
利用弹性盒子写一个菜单栏
/*外部容器设置为弹性*/
.site-nav {
display: flex;
padding: .5em;
background-color: #5f4b44;
list-style-type: none;
border-radius: .2em;
}
.site-nav > li {
margin-top: 0;
}
.site-nav > li > a {
display: block;
padding: .5em 1em;
background-color: #cc6b5a;
color: white;
text-decoration: none;
}
/*所有块的左部外边距*/
.site-nav > li + li {
margin-left: 1.5em;
}
/*设置最后一块的左部外边距为auto来让他填满容器，实现靠右的效果*/
.site-nav > .nav-right {
margin-left: auto;
}
justify-content 等间距
flex属性
flex属性是简写属性
flex-basis
元素大小的基准值，作用于宽度还是高度取决于flex-direction
px、em、百分比
flex-grow
非负整数，子元素的盒模型占据之后的容器宽度可能会有留白
留白会将增长因子视作权重来分给子元素
0代表不增长
flex-shrink
子元素的盒模型占据之后的容器宽度可能不足
0代表不缩水
弹性方向flex-direction
flex-direction:row;//默认控制子元素从左到右
column、row-reverse、column-reverse
在垂直的弹性盒子里，flex的收缩属性不会起作用
Ink
Team collaboration done right
Thousands of teams from all over the
world turn to Ink to communicate
and get things done.
京公网安备 11010802041100号