如何使用 justify-content 将我的块移动到页面的右侧答案

【问题标题】：How can I move my block to the right side of the page using justify-content如何使用 justify-content 将我的块移动到页面的右侧
【发布时间】：2021-11-04 09:06:23
【问题描述】：

我的 Justify-content 不起作用。我想将代码块移到页面的右端，但它却移到了左侧。什么地方出了错？我能做些什么？有没有其他选择，或者我必须使用证明内容吗？请帮助我！以下是我的 HTML 代码：

<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" >
    </head>
    
    <!--Body-->
    <body>
        <div class="container_1">
            <div class="box_1">
                <h3>Box One</h3>
                <p>Random Text</p>
            </div>
            <div class="box_2">
                <h3>Box Two</h3>
                <p>Random Text</p>
            </div>
            <div class="box_3">
                <h3>Box Three</h3>
                <p>Random Text</p>
            </div>
            
        </div>

        <div class="container_2">
            <div class="box_4">
                <h3>Box Four</h3>
                <p>Random Text</p>
            </div>
            <div class="box_5">
                <h3>Box Five</h3>
                <p>Random Text</p>
            </div>
            <div class="box_6">
                <h3>Box Six</h3>
                <p>Random Text</p>
            </div>
        </div>
    </body>
</html>

以下是 CSS 代码：

.container_1 {
    display: flex;


}

.box_1{
    border: 1px;
    border-style: solid;
    border-color: grey;
    padding: 10px;
        /*flex*/
    flex: 1;

}


.box_2{
    border: 1px;
    border-style: solid;
    border-color: grey;
    padding: 10px;
        /*flex*/
    flex: 3;

}


.box_3{

    border: 1px;
    border-style: solid;
    border-color: grey;
    padding: 10px;
            /*flex*/
    flex: 1;
   
}

.container_2 {
    display:flex;
    width: 10%;
    **justify-content: flex-end;**

}

.box_4{
    border: 1px;
    border-style: solid;
    border-color: grey;
    padding: 10px;
        /*flex*/
    flex: 1;

}


.box_5{
    border: 1px;
    border-style: solid;
    border-color: grey;
    padding: 10px;
        /*flex*/
    flex: 1;
    

}


.box_6{

    border: 1px;
    border-style: solid;
    border-color: grey;
    padding: 10px;
            /*flex*/
    flex: 1;
   
}

【问题讨论】：

您指的是哪些框？你想要的结果是什么？你能告诉我们吗？
container_2@Dev 中的框
你想达到什么目标？你能给我描述一下吗？
所以这个？ - codepen.io/Paulie-D/pen/ZEyBZOM
你告诉孩子们尽可能扩大，然后将整体宽度限制在10%

标签： html css justify

【解决方案1】：

将您的 .container_2 更改为：

.container_2 {
    display:flex;
    justify-content: flex-end;
    /* removed width: 10% */
}

并从您的框中删除flex: 1。

说明：

flex: 1 使项目在容器中的增长与可用空间一样多。

【讨论】：