sibbling 요소에 flexbox 속성과 동일한 "패딩"을 지정합니다. justify-content : space-around

Question

제목을 죽이는 데 대해 유감입니다. 하지만 내 문제를 요약하는 방법을 모르겠다.

아래쪽 텍스트가 내 목록과 동일한 패딩을 갖기를 원합니다. 이것이 가능한가?

바이올린 : https://jsfiddle.net/dyLnbr4a/

HTML :

<section> 
    <article> 
    <ul> 
     <li> 
     bla 
     </li> 
     <li> 
     bla 
     </li> 
     <li> 
     bla 
     </li> 
     <li> 
     bla 
     </li> 
    </ul> 
    </article> 
    <aside> 
    <picture> 
     <img src="https://d2btg9txypwkc4.cloudfront.net/media/catalog/category/Kampanjer_1.jpg" alt="image description" style="max-width: 460px"> 
    </picture> 
    </aside> 
</section> 
<footer> 
    this is a footer 
</footer> 

CSS :

section { 
    display:flex; 
    justify-content: space-around; 
    border: 1px solid black; 
} 
article { 
    border: 1px solid darkgoldenrod; 
} 
aside { 
    border: 1px solid wheat; 
} 
footer { 
    border: 1px solid salmon; 
} 

Answer 1

당신은 이미지가 차지하는 공간을 모방 바닥 글에 pseudoelement를 사용할 수 있습니다.

fiddle

section { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    border: 1px solid black; 
 
} 
 

 
article { 
 
    border: 1px solid darkgoldenrod; 
 
} 
 

 
aside { 
 
    border: 1px solid wheat; 
 
} 
 

 
footer { 
 
    border: 1px solid salmon; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    /* default padding assigned to <ul> */ 
 
    padding-left: 40px; 
 
} 
 

 
footer:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 330px; 
 
    max-width: 460px; 
 
}

<section> 
 
    <article> 
 
    <ul> 
 
     <li> 
 
     bla 
 
     </li> 
 
     <li> 
 
     bla 
 
     </li> 
 
     <li> 
 
     bla 
 
     </li> 
 
     <li> 
 
     bla 
 
     </li> 
 
    </ul> 
 
    </article> 
 
    <aside> 
 
    <picture> 
 
     <img src="https://d2btg9txypwkc4.cloudfront.net/media/catalog/category/Kampanjer_1.jpg" alt="image description" style="max-width: 460px"> 
 
    </picture> 
 
    </aside> 
 
</section> 
 
<footer> 
 
    this is a footer 
 
</footer>