如何仅在右侧设置一个 div，而在显示 flex 中设置其他带有线条的 div

Question

我有这个页面，我只想将第一个 div 设置为右侧导航栏，而左侧的另一个带有线刹车。

我现在得到的是：

我想要实现的目标：

<div class="flex-div">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

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

Answer 1

看看你想要达到的最终结果，我建议使用justify-content: flex-end因为它使no1 更接近 2、3、4。

.flex-div {
    display: flex;
    justify-content: flex-end;
    

Answer 2

试试这个代码

<style>
.flex-div {    
    display: block;
    justify-content: space-between;
    max-width:50%;
}
.div1and2 {
    display: block;
    justify-content: space-between;
    width:50%;
    float:left;
    text-align:right;
}

.div3and4 {
    display: block;
    justify-content: space-between;
    max-width:100%;
    text-align:right;
}

<div class="flex-div">
    <div class="div1and2">1</div>
    <div class="div1and2">2</div>
    <div class="div3and4">3</div>
    <div class="div3and4">4</div>
</div>

1. “div1and2”类用于第一个和第二个 div。
2. “div3and4”类用于第三个和第四个 div。
3. 将您的显示样式更改为块而不是 flex。

Answer 3

你可以像下面这样写

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

 <div class="flex-div"> <div>1</div> <div> <div>2</div> <div>3</div> <div>4</div> </div> </div>

Answer 4

在我看来，最干净的方法是使用flex-grow 。 指定此规则时，它将占用所有可用空间，因此将每个同级 div 推送到 flex 容器的末尾。

之后，您可以指定导航的width以对页面进行模板化。

flex-grow 定义了弹性项目在必要时增长的能力。 它接受作为比例的无单位值。 它决定了项目应该占用 flex 容器内的可用空间量。

例如，如果所有项目都将 flex-grow 设置为 1，则容器内的每个子项都将设置为相同的大小。 如果您给其中一个孩子的值为 2，则该孩子将占用两倍于其他孩子的空间。

您可以在CSS-tricks.com上阅读有关 flex-grow 属性的更多信息

 .container { display: flex; } #content { flex-grow: 1; } #navigation { width: 200px; } #navigation, #content div { border: 1px dashed #ccc; margin: 5px; }

 <div class="container"> <div id="navigation">1</div> <div id="content"> <div>2</div> <div>3</div> <div>4</div> </div> </div>

Answer 5

尝试这个：

 .flex-div { display: flex; justify-content: space-between; } .left-section{ background-color:red; width: 30%; padding: 20px; } .right-section{ background-color:yellow; width: 100%; padding: 20px; }

 <div class="flex-div"> <div class="left-section"> <div>1</div> </div> <div class="right-section"> <div>2</div> <div>3</div> <div>4</div> </div> </div>