CSS flex

5843 ワード
テキストリンク

📘 flex

레이아웃 만드는 속성flexを使うと、marginやabsoluteを使わなくても自由に置けます
特に、가로 정렬では非常に有用である.
flexプロパティには、justify-content(좌우)align-items(상하)があります.

✔justival-content(左右)


.wrapper{
display:flex;
justify-content : flex-start /*왼쪽 정렬*/
justify-content : flex-end/*오른쪽 정렬*/
justify-content : space-around/*영역(부모) 안에서 각각의 자식들이 마진을 가지게 함*/
justify-content : space-between/*영역 안에서 좌우 끝 마진은 사라지고 자식들 사이 마진만 가지게 함. 제일 많이 쓴다. */
justify-content : space-evenly /* 모든 공간이 동일하게 마진을 가짐 */
justify-content : center /*가운데 정렬*/'
親案、자식들이 어떻게 정렬될 건지定.부모에 flex 걸어서, 바로 밑의 첫번째 자식들한테만 적용하는 것이다. 속성들도 부모한테 건다.
flexは基本的に좌,위で並べ替えられている.

✔align-tems（上下）

align-itemsもprevident-contentであり、これは上下作用と見なすことができる.
.wrapper{
display:flex;
align-items : flex-start/*기본값이 위쪽 기준이라 별 차이없음*/
align-items : flex-end/*아래쪽으로 붙어서 정렬된다.*/
align-items : center/*위 아래 정렬이 중간으로 맞춰짐*/

flexその他のプロパティ


🚦 order


オーダー
このようにしてflexを適用するサブアイテムorder:3を直接書き込む.
数字は順番で、小数は先に着きます.デフォルトはorder:0です.
したがって、特定の項目を前に移動したい場合は、음수を使用します.

✔flex-direction


たてる
flex-direction : row; 행(가로) 방향으로 세운다.
flex-direction : column; 열(세로) 방향으로 세움
flex-direction : row-reverse; 행으로 나열하는데 반대 순서로 
flex-direction : column-reverse; 열방향으로 세우는데 반대 순서로

✔align-content


複数行
flex-start:  여러줄들을 꼭대기에 정렬한다.
flex-end : 여러 줄들을 바닥에 정렬한다.
center : 여러 줄들을 세로선상 가운데에 정렬한다.
space-between:여러 줄 사이에 동일한 간격을 둔다.(양끝)
space-around: 여러 줄들 주위에 동일한 간격을 둔다. 
stretch: 여러 줄들을 컨테이너에 맞게 늘림(기본값)

✔align-self

각각  align-items 가 받는 값들을 인자로 받음. 
같은데 지정한 요소(자식)에만 적용

図に示すように、パッケージクラスの親クラスには1、2、3のサブクラスがあり、justify-content: space-betweenプロパティを使用します.

✔flex-wrap


複数行揃え
flex-wrap : nowrap ; (모든 요소들을 한 줄에 정렬)
flex-wrap : wrap ; (요소들을 여러 줄에 정렬)
flex-wrap : wrap-reverse ; (요소들을 여러 줄에 반대로 정렬)

✔flex-flow


flex-directionとflex-wrapの2つの一般的な属性は同時にパラメータとして受信される.
flex-flow : row wrap ;
混同した場合は、flex froggyをしながら復習できます.
反射の小例
工場と匿名の内部クラス