壊れた給湯器と濡れたボックスが私にフレックスボックスについて教えてくれたこと。-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

壊れた給湯器と濡れたボックスが私にフレックスボックスについて教えてくれたこと。

Barbara Streisand

Nov 28, 2024 pm 03:48 PM

我が家の給湯器が壊れました。ガレージに入ると水の流れる音が聞こえました。家の蛇口が止まっていることを確認し、トイレが流れていないことを確認し、外を確認しました。いいえ、ホースが外れています。ガレージを再確認してください。まだ水が聞こえます。ガスが水を加熱するときの音かもしれません。歩いて行くと床に水が溜まっています。

給湯器の上部から水漏れしていました。床やカーペットの上に水たまりができています。床には古いカーペットが敷かれているので、裸の床は冷たくありません。今ではそこを小川が流れています。

カーペットの上に保管されていた箱が水を吸い込んでしまいました。箱は濡れてびしょ濡れです。内容の一部も同様です。その箱の中には数冊のペーパーバックとジュラシック・パークの恐竜が入っていました。本は水に濡れていますが、ほとんどは乾きます。

これらのボックスは頑丈ではなく、柔軟性があります。

これらのボックス = フレックスボックス。これにより、LinkedIn のようなクリックベイトのタイトルと、フレックスボックスについて書く口実が得られました。

フレックスボックス

CSS では、フレックスボックスは項目を行または列に水平または垂直に配置するために使用されます。アイテムはコンテナ内のスペースを埋めるために曲がります。

フレックスの使用を開始するには、子要素を保持する親フレックスコンテナに 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>

ログイン後にコピー

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

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

ログイン後にコピー