Flexible Boxes

====== CSS Flexbox ====== * description : CSS Lists, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-05 \\ \\ =====Source of the article==== [[https://www.w3schools.com/css/css3_flexbox.asp|CSS Flexbox]]\\ \\ ======CSS Flexbox====== {{:wiki:css:css_note:flex-box-01.png?400|}}\\ \\ ====예제====






    
    
    
    Flexible Boxes
    



    Flexible Boxes

    
        1
        2
        3
        4
        5
        6
        7
        8
    

    Try to resize the browser window
    A containr with "flex-wrap: nowrap;" will never wrap its items.
    Note: Flexbox is not supportd in Internet Explorer 10 or earlier versions

\\ =====CSS Flexbox Layout Module===== 플렉스박스 레이아웃 모듈 이전에, 4개의 레이아웃 모듈이 있었습니다.\\ * 웹페이지의 섹션을 위한 Block * 텍스트를 위한 Inline * 2차원 테이블 데이터를 위한 Table * 요소의 위치 명시를 위한 Positioned 플렉스박스 레이아웃 모듈은 float 또는 positioning을 사용하지 않고 유연한 반응형 레이아웃 구조 설계를 더 쉽게 만듭니다.\\ \\ =====Browser Support===== 플렉스박스 속성을 모든 현대의 브라우저가 지원합니다.(Chrome, Internet Explorer/Edge, Firefox, Safari, Opera)\\ \\ =====Flexbox Elements===== 플레스박스 모델 사용을 시작하기 위해서, 먼저 플렉스 컨테이너(flex container)를 정의해야 합니다.\\ ====예제====






    
    
    
    Flex Container
    




    
    
        1
        2
        3
    

    A Flexible Layout must have a parent element with the display property set to flex.

    Direct child element(s) of the flexible container automatically becomes flexible items.

=====Ref===== {{:wiki:css:css_note:flexbox_layout.png?600|}} {{tag>오션, CSS Flexbox,}}