flex弹性容器－第九期（191104作业）

一、公共样式代码：  

实例

.container{
    border:2px dashed red;
    margin: 15px;
    background: #cdc;
}

.item{
    box-sizing: border-box;
    border: 1px solid;
    padding: 20px;
    background: #ede;
}

.flex{
    display: flex;
}

二、style1样式代码： 

实例

@import "public.css";

.inline-flex{
    display: inline-flex;
}

 三、style2样式代码：  

实例

@import "public.css";
a{
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 5px 5px 0 0;
    text-decoration: none;
    background-color: lightgreen;
    box-shadow: 2px 0 1px #888;
    color: black;
}

a:hover,
a:focus,
a:active{
    background-color: orangered;
    color: white;
}

nav{
    display: flex;
    border-bottom: 1px solid gray;
}

四、Style3样式代码：  

实例

@import "public.css";
.row{
    flex-direction: row;
}

.row-reverse{
    flex-direction: row-reverse;
}

.column{
    flex-direction: column;
}

.column-reverse{
    flex-direction: column-reverse;
}

五、Style4样式代码：  

实例

@import "style2.css";
*{
    outline: 2px solid #ccc;
    margin: 10px;
    padding: 10px;
}

body,nav,article,main{
    display: flex;
}

body,article{
    flex-direction: column;
}

footer{
    border-top: 1px solid #ccc;
}

nav{
    padding-bottom: 0;
}

六、Style5样式代码：  

实例

@import "public.css";
.container{
    width: 500px;
}

.nowrap{
    flex-direction: row;
    flex-wrap: nowrap;
}

.wrap{
    flex-direction: row;
    flex-wrap: wrap;
}

.wrap-reverse{
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

七、Style6样式代码： 

实例

@import "public.css";
.container{
    width: 500px;
}

.nowrap{
    flex-flow: row nowrap;
}

.item{
    /*min-width: 0;*/
}

.wrap{
    flex-flow: row wrap;
}

.wrap-reverse{
    flex-flow: row wrap-reverse;
}

.column{
    flex-direction: column;
}

 八、Style7样式代码：  

实例

@import "public.css";

.container{
    width: 550px;
}

.wrap{
    flex-wrap: wrap;
}

.flex-start{
    justify-content: flex-start;
}

.flex-end{
    justify-content: flex-end;
}

.center{
    justify-content: center;
}

.space-between{
    justify-content: space-between;
}

.space-around{
    justify-content: space-around;
}

.space-evenly{
    justify-content: space-evenly;
}

九、Style8样式代码： 

实例

a{
    padding:5px 10px;
    margin:0 5px;
    border-radius: 5px 5px 0 0;
    text-decoration-line: none;
    background-color: lightgreen;
    box-shadow: 2px 0 1px #888;
    color: black;
}

a:hover,
a:focus,
a:active{
    background-color: orangered;
    color: white;
}

nav{
    display: flex;
    border-bottom: 1px solid gray;
    /*justify-content: flex-end;*/
    justify-content: center;
}

 十、Style9样式代码：    

实例

@import "public.css";
.container{
    width: 550px;
    height: 300px;
}

.wrap{
    flex-wrap: wrap;
}
.stretch{
    align-items: stretch;
}

.flex-start{
    align-items: flex-start;
}

.flex-end{
    align-items: flex-end;
}

.center{
    align-items: center;
}

.wrap-stretch{
    align-content: stretch;
}

.wrap-flex-start{
    align-content: flex-start;
}

.wrap-flex-end{
    align-content: flex-end;
}

.wrap-center{
    align-content: center;
}
.wrap-space-between{
    align-content: space-between;
}

.wrap-space-around{
    align-content: space-around;
}

.wrap-space-evenly{
    align-content: space-evenly;
}

.all-align{
    justify-content: space-around;
    align-content: space-around;
}

手抄作业：