使用flexbox在主列内创建列
MK-DK
我在Bootstrap 3中制作了下图。我正在为使用BS3的站点进行编程。无法使用BS4。
我对BS3的列高有很多问题，所以我现在放弃了。我上周开始使用flexboxes，因为使用它似乎非常容易。
是否可以使用flexbox使设计适应图像？我已经用flexboxes制作了2个主要列，但是我不太确定如何在右边的主要列中制作2个列。我试图在其中放入一些引导程序，但这完全是错误的。
.call-out-container {
max-width: 1200px;
margin: 40px auto 0 auto;
}
.call-out {
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
flex-basis: 48%;
}
.call-out:nth-child(1) {background-color: pink}
.call-out:nth-child(2) {background-color:rgb(41, 255, 201)}
@media (min-width: 768px) {
.call-out-container {
display:flex;
justify-content: space-between;
}
}<div class="call-out-container">
<div class="call-out">
<h4>Headline 1</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>
<div class="call-out">
<h4>Headline 2</h4><hr/>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div> 莫坦
为了使用flexbox在右侧创建设计，您需要：
1.拿起两列，将它们包装到一个单独的div中。
<div class="call-out">
<h4>Headline 2</h4><hr/>
<div class="two-column">
<div class="column">
<img src="https://via.placeholder.com/250x150.png">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
<div class="column">
<img src="https://via.placeholder.com/250x150.png">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>
</div>
在此示例中，我将两列包装到一个称为两列的div中
2.显示Flex新创建的div
.two-column{
display: flex;
flex-direction: row;
}
请注意：您将必须添加一些调整/媒体查询以提供所需的响应行为，但是这种方法应该可以轻松地创建嵌套列布局。
有用的注释：请记住，您始终可以显示：在已经使用display的元素上为子元素的flex元素：flex
希望能帮助到你。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
flexbox列内的flexbox行
- 2
在列内创建列
- 3
如何使用连接到主ID列的数据基于辅助ID列创建新列
- 4
使用flexbox设置等高的列
- 5
使用 for 循环 i R 根据循环内创建的列创建新列
- 6
如何在创建表的约束或列级别内使用选择
- 7
使用熊猫基于组内排名创建新列
- 8
尝试使用 css flexbox 创建一个视图，结合行和列
- 9
Pandas DataFrame：从列内的列表创建列
- 10
使用for循环创建列
- 11
使用flexbox获得等高的行，而不是列
- 12
使用flexbox的响应式两列布局
- 13
使用flexbox实现相等高度的列
- 14
从主SQL表中的列创建新表
- 15
创建回调后，rails递增非主ID列
- 16
主结果内的SQL自联接结果（非单独列）
- 17
使用Flexbox CSS的左列和堆叠的右列
- 18
使用列标题创建的新列
- 19
使用数字列中的类创建列
- 20
在循环内创建新列或应用
- 21
使用新创建的列
- 22
mysql使用变量创建列
- 23
使用SQL创建单个列
- 24
使用 for 循环创建新列
- 25
使用 mutate 创建新列
- 26
在表格单元格内使用Bootstrap4 / Flexbox，将单元格分为2列，其中一列为绝对位置
- 27
Flexbox列的方向从右到左
- 28
Flexbox网格-等高列
- 29
列flexbox中的换行
我来说两句