布局-flex

flex布局    
CSS Sticky footer完美底部布局

 

flex:   

容器的属性

以下6个属性设置在容器上。

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap:nowrap | wrap | wrap-reverse;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items:flex-start | flex-end | center | baseline | stretch;

align-content:flex-start | flex-end | center | space-between | space-around | stretch;

flex-flow:<flex-direction> <flex-wrap>;

项目的属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

 

弹性布局里有一个很重要的概念叫：主轴、副轴

默认情况下，x轴为主轴，y轴为副轴

弹性布局，就是让子元素在主轴上依次排列

主轴也可以变：

flex-direction可以设置主轴的方向，默认x轴为主轴

给column代表y轴为主轴

flex-start：默认值

flex-end： 在主轴终点对齐

center：在主轴居中对齐

space-around:元素和元素之间有间距，并且起点和终点也有间距

space-between：元素和元素之间有间距，但是两边没有间距

 

align-items：统一设置所有子元素在副轴上的排列方式

flex-start：在副轴起点

flex-end：在副轴终点

center：在副轴居中

 

弹性布局中：如果没有给副轴方向上的大小（可能是宽可能是高），那么默认用父元素的副轴大小

-->

 

<style>

ul{

list-style: none;

padding: 0;

width: 600px;

height: 450px;

border: 1px solid #000;

 

/* 如果要让li使用弹性布局，应该加在ul身上 */

display: flex;

/* 把y轴变为主轴 */

/* flex-direction: column; */

/* 设置子元素在主轴方向上的排列方式，默认是从起点依次排开

flex-start：默认值

flex-end： 在主轴终点对齐

center：在主轴居中对齐

space-around:元素和元素之间有间距，并且起点和终点也有间距

space-between：元素和元素之间有间距，但是两边没有间距

*/

justify-content: space-between;

 

/* 设置副轴方向上的排列

flex-start：在副轴起点

flex-end：在副轴终点

center：在副轴居中

*/

/* align-items: flex-end; */

}

 

li{

width: 600px;

height: 600px;

background-color: yellowgreen;

}

</style>

 

 

 

 

CSS Sticky footer完美底部布局

第一种

body{

   display: flex;

    flex-flow: column;

    min-height: 100vh;

}

.content{

    flex: 1;

}

2.经典套路：padding-bottom + margin-top

.wrapper{

min-height: 100vh;

}

.content{

padding-bottom: 50px;

}

.footer{

height: 50px;

margin-top: -50px;

}