flexbox如何实现5等分

[xlearns]

bootstrap

• 在Bootstrap栅格系统中，可以使用列（col）类来实现等分布局。要将容器分成五等分，可以使用col类中的col-2类，它将容器分成6等分，每个列宽为容器的1/6。然后将每个列的宽度设置为其父容器的宽度的80%，这将使每个列的宽度等于容器宽度的5/6，即实现了容器的5等分布局。

  <div class="container">
  <div class="row">
  <div class="col col-2" style="width: 80%;"></div>
  <div class="col col-2" style="width: 80%;"></div>
  <div class="col col-2" style="width: 80%;"></div>
  <div class="col col-2" style="width: 80%;"></div>
  <div class="col col-2" style="width: 80%;"></div>
  </div>
  </div>

Flexbox

• 使用Flexbox布局，可以将容器分成五等分。可以将容器的display属性设置为flex，并使用flex属性将子元素的宽度设置为相等。可以将子元素的flex-grow属性设置为1，以便它们均匀地填充父容器。以下是示例代码：

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