フレックスボックス

フレックスボックスとは

Flexbox(フレキシブルボックス用の短い)は、ブロック要素として表示されるCSSレイアウトモデルです.これはフレックスコンテナとして知られています.

どのように、私はflexboxを使いますか？

flexboxを使う前に理解するにはいくつかのプロパティがあります.

flex-direction - 垂直方向または水平方向にボックスを配置するために使用します.

Flex-wrap - ボックスのすべてがウィンドウに収まるまで、ボックスを自動的に反対側にラップすることができます.

flex-flow - 屈曲方向と屈曲ラップの両方の要素を結合します.このコマンドは符号化中の効率を高める.

Justify-content - コンテナ内のfloatコマンドとして動作します.これは、コンテンツの開始、終了、またはセンターに整列することができます.

Align items - ボックスの内容を所望の位置に垂直に配置します.「正当化内容」オプションと同じように、開始、終了、および中央のオプションがあります.

容器の内容を揃える様々な種類がある.space-between , space-around , stretch , center , flex-start , and flex-end

それで、あなたはフレックスボックスを使用する主な特性を理解しているので、コードを作成することは非常に簡単で簡単なプロセスでなければなりません.

クリエイトアdiv クラスを含むタグ.クラスの名前は問題ではありませんが、この例ではflex-container .

別の作成div いくつかの種類のコンテンツを含む親タグの下にタグを付けます.

今、私たちはHTMLファイルにコンテナを作っているので、コンテナにスタイリングを追加する必要があります.最も重要なことは、まずCSSコマンドを作成することですdisplay 内容flex .

いいね今、あなたはflexboxを持っている!次のようになります.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
}

私はフレックスボックスを作成しました。

我々が作ったこのFlexbox容器は、本当に鈍く見えます.少し設計しましょう.

設定するflex-direction にrow or column を追加し、background-color ページの残りの部分からコンテナの色をコントラストにするには.

コンテナは設計されていますが、今はコンテナ内のコンテンツを設計しましょう.CSSコマンドを作成するclass-name > div 置換するclass-name をクリックします.

別のコンテンツのデザインを終了background-color , text-align , width , margin , line-height , and font-size .

さて、あなたはうまく設計されたflexコンテナを持つべきです.

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: black;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

flexboxの例:

私のグループメイトと私は過去2週間、Flexboxの使用を含むプロジェクトに取り組んできました.これまでのところ、私たちが学校で学んだ他のプロパティと組み合わせられています.これは我々が思い付いたことだ.
コンフィギュレーション

返します.


( https://repl.it/@RobertoCallejas/AnimatedLinenDeskscan#style.css )
私たちのアイデアは、ウェブサイト上でビデオゲームを促進することでした.
我々は、このポストで説明されたコマンドを使用して我々のFlexboxを作りました、そして、容器を余分の空想に見えるように、さらなる命令と同様に.

#flex-container-hero {
  display: flex;
  background-color: #333;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
}

#flex-container-hero > div {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
  font-size: 25px;
  text-align: center;
  line-height: 75px;
  background-color: grey;
  height: 170px;
  width: 170px; 
  margin: 100px;
}

Flexboxの中にテキストを置く代わりに、Flexboxの中にイメージを入れて、もっと面白くします.HTMLファイルにどのように見えますか

<div id="flex-container-hero">
      <div class"item1"><img src="pc.jpg" style="width:100%"></div>
      <div class"item2"><img src="xbox.jpg" style="width:125%"></div>
      <div class"item3"><img src="playstation.jpg" style="width:110%"></div>
    </div>
    <div id="flex-container-hero">
      <div class"item4"><img src="switch.jpg" style="width:110%"></div>
      <div class"item5"><img src="retro games.jpg" style="width:100%"></div>
      <div class"item6"><img src="gaming accessories.jpg" style="width:110%"></div>
    </div>

あなたがプロジェクトのどこかにイメージをリンクしない限り、明らかにイメージは現れません.それで、私は私のコンピュータにイメージをダウンロードして、ファイル名を私のプロジェクトに置きました.

まとめ

あなたはそれを知らないかもしれません、しかし、flexboxはあなたが訪問したほとんどすべてのサイトで使用されます.これはアップルやAmazonのような大きな会社がどのように製品を宣伝できるかである.デザインがとても魅力的に見えるので、ウェブサイトで簡単に表示することは顧客をより多く引き寄せます.Flexboxはあなた自身のウェブサイトを作るために知る必要がある最も重要な概念の一つです.そして、あなたがFlexboxを使う方法の基礎を知っている今、あなたは非常に最初のウェブサイトで始めることができます.
リソース
W 3スクール:https://www.w3schools.com/css/css3_flexbox.asp
当社のウェブサイト:https://repl.it/@RobertoCallejas/AnimatedLinenDeskscan#style.css