css-flex

---

title: css-flex
date: 2017-09-07 18:10:53
tags: Css

CSS flex 初探

flex 一行多个单元格布局

.flex-container {
     30px;
    height: 30px;
    display: flex;
    background:#eee;
}

.flex-container div {
    height:30px;
    flex:1;
    border: 1px solid #333;
}

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

flex布局之垂直居中

.flex-middle-center {
     100px;
    height:100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:#eee;
}
.flex-middle-center div {
     50px;
    border:1px solid #333;
    text-align: center;
}
<div class="flex-middle-center">
    <div>1</div>
</div>

flex布局之 数列排序

.flex-column {
    display: flex;
    flex-direction: column;
     100px;
    height:100px;
    background:#eee;
}

.flex-column div{
     30px;
    border:1px solid #333;
}
<div class="flex-column">
    <div>1</div>
    <div>2</div>
</div>

flex justify-content示例

.flex-justify-content {
    display: flex;
     100px;
    height:100px;
    background:#eee;
    justify-content: center;
}
.flex-justify-content div {
     30px;
    border:1px solid #333;
}
<div class="flex-justify-content">
    <div>1</div>
    <div>2</div>
</div>

justify-content 的值有

• flex-start (default)
• flex-end
• center
• space-between
• space-around

flex align-items示例

.flex-align-items {
    display: flex;
     100px;
    height:100px;
    background:#eee;
    align-items:center;
}
.flex-align-items div {
     30px;
    height:30px;
    border:1px solid #333;
}
.flex-align-items div:nth-child(2) {
   height:50px;
}
<div class="flex-justify-content">
    <div>1</div>
    <div>2</div>
</div>

align-items 的值有

• flex-start (default)
• flex-end
• center
• baseline
• stretch

flex-wrap示例

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
     100px;
    height:100px;
    background:#eee;
}
.flex-wrap div {
    height:30px;
}
.flex-wrap div:nth-child(1){
     20px;
    border:1px solid #333;
}
.flex-wrap div:nth-child(2){
     40px;
    border:1px solid #333;
}
.flex-wrap div:nth-child(3){
     50px;
    border:1px solid #333;
}
.flex-wrap div:nth-child(4){
     60px;
    border:1px solid #333;
}
<div class="flex-wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

flex-wrap 有的值有

• nowrap (default)
• wrap
• wrap-reverse

flex align-content示例

.flex-align-content {
    display: flex;
    flex-wrap: wrap;
    align-content:center;
     100px;
    height:100px;
    background:#eee;
}
.flex-align-content div:nth-child(1){
     20px;
    border:1px solid #333;
}
.flex-align-content div:nth-child(2){
     40px;
    border:1px solid #333;
}
.flex-align-content div:nth-child(3){
     50px;
    border:1px solid #333;
}
<div class="flex-align-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

flex margin-right设值

.flex-margin-auto {
    display: flex;
     100px;
    height:100px;
    background:#eee;
}
.flex-margin-auto div {
     20px;
    border:1px solid #333;
}
.flex-margin-auto div:nth-child(1){
    margin-right:auto;
}

<div class="flex-margin-auto">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>