主页 / 问题 / 853733
Accepted
ruslik
Asked:2020-07-12 21:33:32 +0800 CST2020-07-12 21:33:32 +0800 CST

Flexbox - 3 列等宽

  • 772

如何制作3个相同宽度的块（在一行中），前提是父级的宽度可以是任意的。块之间有标准的 20px 间距。块可以排成几行。

例子

在示例中，只有第三个块移出，而是一个新行。需要 3 列

css3

4 个回答

  1. Best Answer

    对于块之间具有 20px 填充的三列 

    *{
  box-sizing:border-box;
}
body{
  margin:0;
}
.flex{
  display:flex;
  flex-wrap:wrap;
}
.item{
  height:60px;
  background-color:#cda;
  width:calc( ( 100% - 40px ) / 3 );
  margin:0 0 20px;
}
.item:nth-child(3n-1){
  margin-left:20px;
  margin-right:20px;
}
    <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    • 5

  2. 选项 cflex

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex:after {
  content: '';
  display: table;
}

.item {
  height: 60px;
  background-color: #cda;
  margin: 0 0 20px;
}

.flex:after,
.item {
  width: calc(100% / 3 - 13px);
}
    <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    变体grid

    *{
  box-sizing:border-box;
}
body{
  margin:0;
}
.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 20px;
  justify-content: space-between;
}
.item{
  height: 60px;
  background-color:#cda;
}
    <div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    • 2 

  3. * {
  margin: 0;
  padding: 0;
}

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

.wrap__col {
  text-align: center;
  background-color: #000;
  color: #fff;
  width: 32%;
}

.wrap :nth-child(3n+2) {
  margin: 0% 2%;
}

.wrap__col:last-child {
  margin-right: 0;
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div class="wrap">
      <div class="wrap__col">1</div>
      <div class="wrap__col">2</div>
      <div class="wrap__col">3</div>
      <div class="wrap__col">4</div>
      <div class="wrap__col">5</div>
      <div class="wrap__col">6</div>
      <div class="wrap__col">7</div>
      <div class="wrap__col">8</div>
      <div class="wrap__col">9</div>
    </div>
</body>
</html>

    • 0 

  4. .wrap {
  width: 830px;
  display: flex;
  flex-wrap:wrap;
  background-color: red;
      border: 2px solid black;
    justify-content: space-around
}

.col {
  width: 33.3333%;
  height: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: green;
flex-grow: 1;
}

.col:nth-child(3n){
    margin-right: 0;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
 <div class="wrap">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
</body>

</html>

    • -1

相关问题