css-flexboxレイアウト

2008 ワード
テキストリンク
-画面レイアウト時の注意事項(ブロック、行内)
  • block形状
    -boxの横に要素はありません.(div、header、main、sectionなど)、ブロックには高さと幅があります.
    -積み木には3つの特徴があります.
  • marify:boxのborder(枠線)の「外部」の空間で、1つの値が上下左右同じ値に適用されます.2つの値をあげると上下左右に適用されます.4つの値を指定すると、時計回りに適用されます.折りたたみマージン:2つのボックスのマージンは1つとみなされ、要素の枠線が同じ場合(条件)は上下隅でのみ発生します.
  • padding-box境界の「内側」空間
  • border-は、行にも適用されます.15px solid balck; border-radiusなどの属性を持つ表形式で記入します.
  • inline(=同じ行)形式
    -spanの隣に他の要素があるかもしれません.(span、a、link、imageなど)行内に高さや幅はありません.
    -行にはfrom上下x程度しか適用されません.paddingは4週間に適用されます.
    • **blockのタイプではない方が便利だということを覚えておきましょう.
  • blockの横には要素はありませんが、displayプロパティ値をinline、inline-blockなどとして指定し、inlineとして使用できます.
    -inline-block:他の要素をブロックとして認識したり、直接横に置いたりすることができます.でも使いづらい固定フォーマットがなく、箱の間に空白が表示されます.反応型設計はサポートされていません.(ウィンドウサイズの影響)
    • - flexbox
    - 박스를 어느 곳에든 둘 수 있다. `display: flex`
- 지켜야할 규칙이 세개 있다. 
 1. 자식 요소에 명시하지 않고 직접적인 부모 요소에만 명시해야 한다. 
   자식들을 움직이려면 부모를 `display: flex`로 만든다.(부모 = flex container)
    このように指定すると、主軸、交差軸を置くことができます.
    2.主軸(mainaxis、親要素に適用)
    属性justify-content:center、flex-end、flex-start(デフォルト)、space-tweenなど.主軸に適しています.
    3.交差軸(cross axis、ギャップに垂直)
    属性align-items:center、stretch、などを使用します.交差軸に適用します.
    ** height: 100vh; -------> vh単位:ビューポート(=画面)の高さ、100 vh=画面の高さの100%.画面の大きさに応じて高さを変更します.
    **サブエレメントはflexコンテナであってもよい.
    flexboxプロパティ
  • flex-direction:スピンドルのプロパティを設定するflex-direction: column主軸(previty-content)垂直、交差軸(align-items)横方向を表す
    (row:dipole値、主軸(previty-content)横、column-reverse:下から上へ、など)
  • flex-wrap:flexのサブエレメントがflexを宣言する領域から離れた場合、行を強制的に配置するか分割するかを決定するために使用されます.
    flex-wrap:wrapを宣言する場合は、flexを宣言する領域から離れるときに別々に配置できます.指定した寸法を反映します.
    flex-wrap:nowrap(初期寸法を考慮せず、強制的に1行に並ぶ)、wrap-reverse等
    • 位置プロパティ
  • position:位置移動用.
    固定(初期位置固定);
    static(初期位置、デフォルト位置)
    相対(エレメントは初期位置に対して上下に移動できます.)
    absolute(最近の相対親移動に基づく.親を相対させなければならない.いなければbodyに基づく)
    • **position:fixed時にtop、left、right、bottomが設定されている場合、要素は他のレイヤ(一番上)に配置されます.
    AndroidカスタムView backgroundの色と画像を取得
    Android GridViewプロパティセット