고장난 온수기와 젖은 상자를 통해 Flexbox에 대해 알게 되었습니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

고장난 온수기와 젖은 상자를 통해 Flexbox에 대해 알게 되었습니다.

Barbara Streisand

Nov 28, 2024 pm 03:48 PM

온수기가 고장났습니다. 차고에 들어갔더니 물 흐르는 소리가 들렸습니다. 집 수도꼭지가 꺼져 있는지, 화장실이 작동하지 않는지, 외부를 확인했습니다. 안돼 호스를 꺼. 차고를 다시 확인하면 여전히 물 소리가 들립니다. 아마도 가스가 물을 가열할 때 나는 소음일 수도 있습니다. 걸어가면 바닥에 물이 있습니다.

온수기가 위에서 물이 새고 있었습니다. 바닥과 카펫 사이에 웅덩이가 있습니다. 바닥에 오래된 카펫이 있어서 맨바닥이 춥지 않습니다. 이제 그것을 통과하는 스트림이 있습니다.

카펫에 보관된 상자에 물이 묻어 있습니다. 상자가 젖어 축축해졌습니다. 일부 내용도 그렇습니다. 그 상자에는 단행본 몇 권과 쥬라기 공원 공룡이 몇 권 들어 있었습니다. 책이 물에 의해 손상되었지만 대부분은 말라버릴 것입니다.

이 상자는 더 이상 견고하지 않고 유연합니다.

이 상자는 flexbox입니다. 제목과 같은 클릭 미끼 LinkedIn과 Flexbox에 대한 글을 쓸 변명을 제공했습니다.

플렉스박스

CSS flexbox는 행이나 열에서 항목을 가로 또는 세로로 정렬하는 데 사용됩니다. 항목이 컨테이너의 공간을 채우기 위해 구부러집니다.

flex 사용을 시작하려면 하위 요소를 보관하려는 상위 flex 컨테이너에 display:flex를 추가하세요.

.flex-container {
  display: flex;
}

<flex-container>
  <div>



<p>Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.<br>
</p>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div>



<h2>
  
  
  Justify Content
</h2>

<p>So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.</p>

<ul>
<li>justify-content: center - Aligns items in the center of the container.</li>
<li>justify-content: space-around - Places space at the front and end of the container plus in between each item.</li>
<li>justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.</li>
<li>justify-content: flex-start (default) - Aligns at the start of the container.</li>
<li>justify-content: flex-end - Aligns at end of container.
</li>
</ul>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}