css-常用布局方法05-flexbox布局

一、css-常用布局方法

1. flexbox布局

• 弹性盒子
• 盒子本来就是并列的
• 指定宽度即可

<div class="container">
  <div class="flex">
  	flex
  </div>
  <div class="flex">
  	flex
  </div>
  <div class="flex">
  	flex
  </div>
  <div class="flex">
 	 flex
  </div>
  <div class="flex">
  	flex
  </div>
  <div class="flex">
  	flex
  </div>
</div>

.container {
  width: 800px;
  height: 200px;
  display: flex;
  border: 1px solid black;
}

.flex {
  background: red;
  margin: 5px;
  flex: 1;
}

demo:

<div class="container">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.container {
  width: 800px;
  height: 200px;
  display: flex;
}

.left {
  background: red;
  display: flex;
  width: 200px;
}

.right {
  background: blue;
  display: flex;
  flex: 1
}