Flex布局

最后更新时间：2019年09月26日
body {
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: 400px;
    background: skyblue;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.son {
    height: 50px;
    flex: 1;
}

.son.bg01 {
    background: pink;
    height: auto;
    align-self: stretch;
}

.son.bg02 {
    background: black;
    font-size: 32px;
    color: #fff;
}

.son.bg03 {
    background: yellow;
}

.son.bg04 {
    background: white;
}

<html>
 <head></head>
 <body>
  <div class="container"> 
   <div class="son bg01">
    1111111
   </div> 
   <div class="son bg02">
    2222222222
   </div> 
   <div class="son bg03">
    333333333
   </div> 
   <div class="son bg04">
    44444444
   </div> 
  </div>
 </body>
</html>

声明：子客|版权所有，违者必究|如未注明，均为原创|网站采用BY-NC-SA协议授权

转载：请注明原文链接 - Flex布局

Carpe Diem and Do what I like