1. 首頁
  2. 問答
  3. 使用flexbox之間的空間

使用flexbox之間的空間

2017-07-28 173 views
0

我有4塊，我需要使用flexbox添加空間，如下面的屏幕截圖所示：screenshot。使用flexbox之間的空間

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

 
.block { 
 
    width: 50%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

來源

2017-07-28 athi

回答

5

可以使用柔性盒財產證明的內容。 看到這個---： 

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

 
.block { 
 
\t 
 
    width: 40%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

來源

2017-07-28 09:32:36

+0

這比我的更好，如果你尋找一個不那麼hacky的方法，但不太精確控制之間的差距列。 – beerwin

+0

是的，你是對的@ beerwin –

0

變化block的width:50%到width:49%工作

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 
.block { 
 
    width: 49%; 
 

 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

來源

2017-07-28 09:29:38 Bhargav

+0

我只需要在列之間的空間。 – athi

0 

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

 
.block { 
 
    /* changed the width to 45% and added auto margin */ 
 
    width: 45%; 
 
    margin:auto; 
 
    
 
} 
 
.right{ 
 
margin-right:0px; 
 
} 
 
.left{ 
 
margin-left:0px; 
 
}
<div class="container"> 
 
    <div class="block left"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block right"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block left"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block right"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

試試這個

來源

2017-07-28 09:31:35 M0ns1f

+0

右側有空間。我只需要在兩者之間的空間。 – athi

+0

@athi我刪除了右邊緣請upvote並使其作爲解決，如果你有你需要的東西 – M0ns1f

0

請試試這個代碼。這裏您需要要求減小block的寬度並將padding-right添加到block類。

.block { 
    width: 48%; 
    padding-right: 2%; 
}

希望這會有所幫助。

來源

2017-07-28 09:32:48

0

我加了一個無形的div與space類，恢復50％的div至45％，給了space 5％

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

 
.block { 
 
    width: 45%; 
 
} 
 
.space { 
 
width: 5%;
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="space"></div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="space"></div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

來源

2017-07-28 09:33:21 Zabusy

0

您可以使用justify-content: space-around或justify-content: space-between如果你想添加空間塊之間。

或者你也可以減少你的塊大小一樣，

.block { 
    width: 40%; 
    margin: 0 2.5% 
} 


.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 

 
} 
 

 
.block { 
 
    width: 50%; 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

來源

2017-07-28 09:33:41

0

這是一個有點棘手，但並非不可能。使用填充而不是邊距。 無論您有多少物品，這都可以工作。唯一的限制是只有2列。

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

 
.block { 
 
    width: 50%; 
 
    box-sizing: border-box; /*Set the box sizing to include paddings and borders into the width calculation*/ 
 
} 
 

 
.block:nth-child(odd) { 
 
    padding-right: 10px; /*Add right padding for odd items (left side)*/ 
 
} 
 

 
.block:nth-child(even) { 
 
    padding-left: 10px; /*Add left padding to even items (right side)*/ 
 
}
<div class="container"> 
 
    <div class="block"> 
 
    <h5>New</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Heading</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras conva</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p> 
 
    </div> 
 
    <div class="block"> 
 
    <h5>Cras nita</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p> 
 
    </div> 
 
</div>

來源

2017-07-28 09:34:27 beerwin

1

添加justify-content:space-between;您.container 我認爲這將解決這個問題！謝謝。

來源

2017-07-28 09:39:03

相關問題

 相關問題