将div与flexbox对齐。全宽2格，内联线一半插入2格 [英] Aligning divs with flexbox. 2 divs full width and 2 divs inline at half of width

问题描述

我正在尝试布局全角2格和半角2格（最后2格应该在一行中）。

HTML如下所示：

 < div class = container> 
< div class = box--full> 1< / div> 
< div class = box--full> 2< / div> 
< div class = box--half> 3< / div> 
< div class = box--half> 4< / div> 
< / div> 
  

CSS：

  * {
 box-sizing：border-box; 
} 
 
 .container {
 display：flex; 
宽度：200像素； 
 flex-flow：行换行； 
} 
 
 [class * = box--] {
 display：flex; 
保证金：.25rem； 
身高：2rem; 
 padding：.25rem; 
颜色：白色； 
} 
 
 .box--full {
背景：红色； 
 flex：1 1 100％; 
} 
 
 .box--half {
背景：蓝色； 
 flex：1 1 50％; 
} 
  

我想知道为什么最后2个div没有一半可用宽度，为什么不排成一行。我想避免为最后2个div添加包装器。

我发现添加 flex：0 1 50％将所需的宽度应用于最后2个div，但它们仍然不是内联的。

是否可以使它们内联而不用另外包装？

以下是指向代码笔的链接： http://codepen.io/ sunpietro / pen / Mepmam

解决方案

它们不在同一行，因为它们确实具有 margin 和 margins 占用一些空间，因此您必须减小百分比：

< pre class = snippet-code-css lang-css prettyprint-override> * {box-sizing：border-box;}。container {display：flex;宽度：200像素； flex-flow：行换行；} [class * = box--] {display：flex;利润：.25雷姆;高度：2rem；填充：.25rem;颜色：白色；}。box--完整{背景：红色； flex：1 1 100％;}。box--一半{背景：蓝色； flex：1 1 30％;}

 < div类=容器> < div class = box--full> 1< / div> < div class = box--full> 2< / div> < div class = box--half> 3< / div> < div class = box--half> 4< / div>< / div>  

I'm trying to make a layout of 2 divs of full width and 2 divs of half width (the last 2 divs should be in one line).

The HTML is like the following:

<div class="container">
    <div class="box--full">1</div>
    <div class="box--full">2</div>
    <div class="box--half">3</div>
    <div class="box--half">4</div>
</div>

The CSS:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 200px;
    flex-flow: row wrap;
}

[class*="box--"] {
    display: flex;
    margin: .25rem;
    height: 2rem;
    padding: .25rem;
    color: white;
}

.box--full {
    background: red;
    flex: 1 1 100%;
}

.box--half {    
    background: blue;
    flex: 1 1 50%;
}

I'm wondering why the 2 last divs doesn't have a half of available width and why aren't they in one line. I would like to avoid adding a wrapper for the last 2 divs.

I found that adding flex: 0 1 50% applies the desired width to the last 2 divs but they still are not inline.

Is it possible to make them inline without making an additional wrapper?

Here's the link to codepen: http://codepen.io/sunpietro/pen/Mepmam

解决方案

They are not in the same line, because they do have margin, and margins take a little space, so you have to decrease percentage:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 200px;
    flex-flow: row wrap;
}

[class*="box--"] {
    display: flex;
    margin: .25rem;
    height: 2rem;
    padding: .25rem;
    color: white;
}

.box--full {
    background: red;
    flex: 1 1 100%;
}

.box--half {    
    background: blue;
    flex: 1 1 30%;
}

<div class="container">
    <div class="box--full">1</div>
    <div class="box--full">2</div>
    <div class="box--half">3</div>
    <div class="box--half">4</div>
</div>

这篇关于将div与flexbox对齐。全宽2格，内联线一半插入2格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！