flex布局
2019-03-14 本文已影响0人
乔乔_老师
一、基本概念
容器:如果给一个元素添加display:flex属性，称为这是一个容器
项目:容器里面的直接子元素称为项目
主轴:默认页面从左向右排列
交叉轴:与主轴垂直的轴，默认是从上向下
二、容器的属性
flex-direction:用来设置主轴方向的
flex-direction:row(默认值)|column(列)|row-reverse|column-reverse
flex-wrap:控制是否要换行
flex-wrap:nowrap(默认值，不换行)|wrap(换行)|wrap-reverse
flex-flow:是flex-direction和flex-wrap的简写
flex-flow:row wrap;
just-content:默认的对齐方式
just-content:flex-start 默认值(左对齐)
flex-end 右对齐
center 居中对齐
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍，定义了项目与主轴的对齐方式
三、项目的属性
align-self:允许单个项目与其他项目不一样的对齐方式，可覆盖align-item属性
align-self:auto(默认值)，元素继承了它的父容器的align-item属性。如果没有赴日那个气则为"strentch"。
align-self:stretch:元素被拉伸一适应容器
align-self:center 元素位于容器的中心
flex-start:元素位于容器的开头
flex-end 元素位于容器的结尾
baseline:元素位于容器的基线上
flex-grow:设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
flex-grow:0(默认值为0)，可设置不同的数字
结论:如果一个项目的flex-grow为0，则它的宽度不会放大
项目的flex-grow越大，说明它在放大后会得到更多的空间
项目的flex-grow越小，说明它在放大后，会得到更小的空间
如果所有项目的flex-grow值都一样，他们会等分多余的空间
flex-shirnk:设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）
flex-shrink: <number>;默认值为1
结论：
1.项目默认会被缩小(空间不够),flex-shrink默认值为1
2.flex-shrink越大，被压缩越多
3.flex-shrink越小，被压缩越小，如果flex-shrink值为0，不会被压缩
四、
flex-basis和width的区别
1.当指定一个flex-basis值的时候，盒子的宽度属性是被忽略的
2.使用max-width和min-width会限制flex-basis的值
3.items的宽度关键在用最终的flex-basis。最佳的方法是只使用flex-basis而不是width或height属性。特别是Safari 10之前的版本的浏览器有一个flexbox bug，在给items应用flex-shrink属性的时候，浏览器会使用height属性而不是flex-basis。
五、实际应用
想要使用flex布局只需要在父元素下使用属性 display:flex即可,
父元素下的子元素也需要使用属性 flex:1,这样的话父元素下的每个小类会均分父元素
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
width:100%;
height:30px;
display: flex;//父元素须使用flex
border:1px solid #000;
}
li{
list-style: none;
flex:1;//子元素设置为1，只要设置为均等值那么子元素会均分父元素
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>详情页</li>
<li>联系我们</li>
</ul>
</body>
