열을 모눈에 맞춰 정렬하고 마지막 행을 가운데에 배치하려면 어떻게합니까?

Question

나는 다음과 같은 레이아웃을 달성하는 방법은 다음과 같습니다

나는 인 flexbox을 사용하려고했습니다 jusitfy-content: space-around;을 사용하여 콘텐츠를 정당화. 거의 모든 것이 작동하지만 첫 번째 행을 제외하고는 각 열이 컨테이너에 맞춰집니다.

또한 6 개의 항목을 사용해야 할 수도 있습니다. 그 경우 하단 행은 상단 행과 동일하게 반영되어야합니다.

항목이 동적으로 생성됩니다.

이 모든 것이 가능합니까? 나는 이것을 어떻게 얻을 수 있을까?

Answer 1

플렉스 박스에 class "thing"으로 더 많은 상자를 생성하고 레이아웃이 어떻게 변하는 지 확인할 수있는 버튼이 추가되었습니다. 희망, 도움이됩니다. : 당신이 나에게 코드를 제공하는 경우

$("button").click(function(){ 
 
    $(".things").append("<div class='thing'></div>"); 
 
});

.things { 
 
    padding: 0; 
 
    margin: 0; 
 
    flex-flow:row wrap; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.thing { 
 
    border:1px solid black; 
 
    padding: 10px; 
 
    margin:30px; 
 
    flex:1 0 300px; 
 
    min-width:300px; 
 
    max-width:350px; 
 
    height:300px; 
 
    background:red; 
 
    align-items:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>CLick me to make boxes!</button> 
 

 
<div class="things"> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
</div>

Answer 2

나는이를 업데이트 할 수 있지만 내 예제에서 그것을 어떻게.

작동 예 - https://codepen.io/anon/pen/dJodeZ가

.item { 
    width: 350px; 
    border-bottom: 1px solid black; 
    padding: 10px 0px 50px 0px; 
    margin-bottom: 50px; 
    margin-left: 25px; 
    display: inline-block; 
} 
.wrapper{ 
    text-align: center; 
    justify-content: center; 
    width: 95%; 
    margin-top: 100px; 
    margin-left: 2.5%; 
} 

Answer 3

당신은 이것에 대한 부트 스트랩을 사용할 수 있습니다. 웹 사이트의 머리에 https://getbootstrap.com/docs/4.0/getting-started/introduction/ 의 링크를 넣으십시오. 다음 코드를 몸에 넣을 수 있습니다.

<div class="col-lg-4 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 
<div class="col-lg-4 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 
<div class="col-lg-4 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div><br> 
<div class="col-lg-6 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 
<div class="col-lg-6 col-md-6 col-sm-12"> 
    <!-- your stuff here --> 
</div> 

이렇게하면 원하는 레이아웃을 얻을 수 있습니다. 큰 화면에서 처음 세 개의 <div> 요소는 각각 화면의 1/3을 차지하고 마지막 두 개는 각각 절반을 차지합니다.

편집 - div 안에있는 요소에 text-align:center;을 사용하십시오.