🎨 CSS

このテクノロジーがどのような問題を解決するために発生したのかを理解します.
FLEXBOX FROGGYでFLEXBOX練習

*flex特性

flex容器のサブエレメントはブロックを形成するのではなく、それらを接着させる.

デフォルトではflexのdirectionはrow(行)です.そしてその時の主軸は横方向でcross-axisは縦方向であった.

の横ソートでは、qualified-contentプロパティを使用してflexコンテナ内の要素をソートできます.

にソートすると、align-itemsプロパティを使用してflexコンテナ内の要素をソートできます.

flex property

flex-shrink
コンテナ内のelemはそれぞれ表示されます:flex;デフォルトはflex-schrif:1です.与えられる.ウィンドウが小さくなると、elemのwidthは値を設定しても一定の割合でねじれ、flex-schripの値が2の場合、元の1の値より2倍ねじれます.

flex-grow
flex-growのdefault=0であり、容器内に横軸でも縦軸でも空間がある場合、特定のelem上にflex-grow:1;値をに設定すると、残りのスペースを設定するelemには塗りつぶし効果があります.ウィンドウのサイズを小さくします.elem間に間隔がない場合は、同じ幅または高さを有します.

flex-basis
これはflex-growとflex-shillが現れる前にデフォルトのサイズを設定する値です.

axis

  axisには2つの軸があります.mainとは十字軸です.parentでflexを設定する場合、flex-directionのデフォルトはrowに設定され、mainaxisはrow(横)、crossaxisはcolumn(縦)に設定されます.
  flex-directionがcolumnに設定されている場合、mainaxisはcolumn、crossaxismsrowになります.

align-itmes

maintaxisまたはcrossaxisの上にある要素配列を管理するプロパティです.

justify-content

maintaxisまたはcrossaxisの上にある要素配列を管理するプロパティです.

center

space-between

、子供の間の両端を含まない

space-around

*位置決めテクニック

align-self
cross axis축에 있는 elem 중 특정 elem을 관장하여 포지션 할 수 있다. 예를 들어 부모가 컨테이너 박스이고 그 
안에 자식이 5명이 있다면 align-self property를 이용할 경우 5명 중 특정한 자식에 접근해서 해당 위치를 조정 할 
수 있는 것이다.

align-content
cross axis축에 있는 elem 간의 위치를 조정한다.

justify-self
위와 동문이다. 다만 두가지 특성이 나뉘어진 것은 flex-direction에 따라 main과 cross축이 달라지기 때문에 그에 
따른 축 위에 있는 요소들의 배열을 관장하기 위해 나눈 것 뿐 개념적으로 기능적으로 같은 역할을 한다.

order
html code를 변경할 수 없을 때 elem에 order propery를 부여해서 순서를 관장할 수 있다. html code의 위치를 변
경하지 않고 CSS를 통해 순서만 변경할 수 있기 때문에 매우 유용한 기능이라고 볼 수 있다.

wrap
child elem을 가진 parent elem에 부여하는 속성. parent가 flex이고 child요소를 elem으로 갖고 있을 시 elem의
크기를 설정한 후 해당 크기를 유지하고 싶을 경우 parent elem에 attribute로 flex-wrap: wrap; 코드를 작성한다
.

*親プロパティ

子の位置にあるホッパーの位置を管理することができる.

*ブロックの特性

の隣には何も来ません.

*保護者と子供の特徴

widthおよびheightは、子供が設定した値に適用される.

parentセクションでwidth値とheight値が適用されると、サブ要素は適用される横および縦のサイズに従って配列されます.