Flexbox
Flexbox
2009年には、反応型Webページを構築し、オブジェクトを簡単に組織することを目標とする新しいレイアウトシステムが発表されました.2014年以降、ほとんどのブラウザでサポートされています.現在、Webページの主なレイアウトシステムとして使用されています.
ブラウザIE 9以降ではFlexはサポートされていません.
開発ツールに表示されるflexプロパティ
Flexboxは1次元レイアウトシステムであり、flex itemのスタック方向はmain axis(主軸)である.
親プロパティ(コンテナ)
display values
flex
display: flex;
flow layoutに配備すると、ブロックレベルになります.
inline-flex
display: inline-flex
flow layoutに配備すると、行内レベルになります.
flex-direction:配置方向の設定
アイテムの配置軸方向のプロパティを決定します.
flex-direction:row//デフォルト
row-reverse
column
column-reverse
display: flex;display: inline-flexflex-wrap:改行を設定する
flex-itemプロパティは、それらを1行に配置するか、可能な領域内で複数行に分割するかを決定するために使用されます.
flex-wrap:nowrap//デフォルト
親のwidthを超える長さがflex-itemを超える場合.
wrap
親のwidthよりflex-item長ければ、親は子供への包容力を変える.
wrap-reverse
改行は起こりますが、itemが上に積み上げられます.
Reference
この問題について(Flexbox), 我々は、より多くの情報をここで見つけました https://velog.io/@gga4638/Flexboxテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol