5分でCSSフレックスボックスを学んでください!

畝
このポストは私も私のブログで書かれました.あなたはHEREでそれを読むことができます
おい、今日、私はあなたがCSSフレックスボックスを使用し始めるのを知っている必要があるすべてを説明します.飛び込む前に自己紹介します.
私はcodingporiumと私はコーディングチュートリアルを作成し、無料のソースコードを提供します.私はyoutubeに初心者です、しかし、私は3年以上の間フロントエンドウェブ開発で経験をします.私のYouTubeチャンネルをチェックしてください.

基礎

さて、今チュートリアルに飛び込みましょう.Flexは、カードまたは任意のdivを可能にする表示タイプです.フレックスボックスの特定のプロパティは、それのような応答性などの有名になります.基本的なFlex表示を使用する方法を見てみましょう.
最初にHTMLコードを追加します.
クラスボックス"フレックスボックス"
< div > 1
< div > 2 < div >
< div > 3 >
< div >
次に、以下のCSSコードを追加します.
フレックスボックス
表示:屈曲;
｝
フレックスボックス
背景:白;
ボックスシャドウ: RGBA ( 0 , 0 , 0 , 0.24 ) 0 px 3 px 8 px
マージン: 10 px
ボーダー半径:10 px
パディング: 20 px
フォントサイズ:30 px;
｝
CSSコードを見れば、FlexボックスのFlexの表示を追加するだけです.それの下で、我々は彼らにパッド、色とより多くを与えることによって箱をスタイルしました.ここで必要な主なコードは、ディスプレイです.次に、我々はそれを良くするためにflexのプロパティを見ていきます.

フレックス方向

Flex Directionプロパティを使用すると、フレックスを左から右に配置するかどうかを決定するかどうかは、右上、上または下から上に下に配置します.以下のすべてのこれらの4方向のコードです.行は、垂直方向の列です.畝
フレックスディレクション
フレックスディレクション
フレックスディレクション
屈曲方向:コラム逆
例については、以下の写真の列を使用します.出力は以下のようになります.
このプロパティでは、必要に応じて行を埋めるために行のフレックスボックスを成長させることができます.言い換えると、各フレックスボックスがどのくらいのスペースを取らなければならないかを定義します.例については、我々はさらに長くなる3フレックスボックスから1つを作ることができます.完璧な例は以下のイメージです.現在、この概念を理解するには、以下のコードブロックをCSSファイルで有効にする必要があります.
タイプ( 1 ) {フレックス成長:1 }
タイプ( 2 ) {フレックス成長:3 }
タイプ( 3 ) {フレックス成長:1 }
あなたが1としてFlex Growthをセットするならば、それは他のボックスと等しくなるためにスペースを分けます.

フレックス成長

デフォルトでは、Flexboxは1つのトレイ/行/collumnに収まるように最善を試してください.ただし、Flexラッププロパティを使用して別のトレイに別のトレイに移動する余分なflexboxを設定することができます.以下のイメージはさらに説明します.現在、このプロパティについては、次の1行のみを追加します.このプロパティをテストする前に、Flex Growthプロパティを削除してください.
フレックスラップ:ラップ

フレックスラップ

このプロパティでは、フレックス方向とフレックスボックスのプロパティが一緒に結合されます.このプロパティの既定値は、行のnowrapです.以下のイメージは、Flex Flow :コラムラップの例に使用されます.コードは次のようになります.
フレックスボックス
表示:屈曲;
フレックスフロー:コラムラップ
｝

フレックスフロー

4つの共通のプロパティを学んだので、このプロパティもかなり理解できます.このプロパティは、Flexboxプロパティを実行するための短縮プロパティ(コードのより簡単な行)です.例では、Flexのコードを追加することができます:1

フレックス

flexboxを学んだので、すべてのプロジェクトでそれを使用するように感じるかもしれません.しかし、flexboxはいくつかのブラウザでのみサポートされています.フレックスボックスは、最新のブラウザで動作しますが、Internet Explorer 10または以前のバージョンでは動作しません.したがって、あなたはそれを念頭に置いておきたいかもしれません.しかし、それ以外にも、Flexboxを使っています.このチュートリアルはFlexboxの基礎にあります.フレックスボックスにはさらに多くのプロパティがあります.あなたがこのチュートリアルのパート2に興味があるならば、下記のコメントをしてください、さもなければ、私にメールしてください

ブラウザサポート

あなたが疑い、不確実性または提案をするならば、下でコメントをするか、あなたはで私にメールすることができます.このFlexboxチュートリアルがあなたのすべてにとって役に立つことを望みます、そして、私は私にここで書く機会を与えるためにランダムにコードに感謝したいです.私は、将来のポストであなたに会うことを望みます.さようなら!