오늘 추억

Element.column 및 Element.row에서 요소를 가로 및 세로로 정렬

row    : List (Attribute msg) -> List (Element msg) -> Element msg
column : List (Attribute msg) -> List (Element msg) -> Element msg

할 수 있는 것

module Main exposing (main)

import Element exposing (..)


main =
    layout [] <|
        column []
            [ column []
                [ text "c"
                , text "o"
                , text "l"
                , text "u"
                , text "m"
                , text "n"
                ]
            , row [] [ text "r", text "o", text "w" ]
            ]

소개

#2에서는 el를 사용하여 스타일링을 시도했습니다.

오늘은 여러 요소를 가로로 정렬하거나 세로로 정렬합니다.

column으로 세로 정렬

column []
    [ text "c"
    , text "o"
    , text "l"
    , text "u"
    , text "m"
    , text "n"
    ]

이제 세로로 정렬됩니다. 그대로입니다.

행으로 수평 정렬

row [] [ text "r", text "o", text "w" ]

이제 옆으로 늘어서 있습니다. 그대로입니다.

본편은 이상입니다, 이하 여담

행과 열 방향을 기억하는 방법

한눈에 알 수있는 행렬 (Row · Column)의 방향을 기억하는 방법에서 인용

Row · Column의 기억 방법 : 대문자로 쓸 때 구멍을 만들기 위해 추가하는 막대의 방향이 일치합니다.



This 작품 by Λlisue is licensed under a Creative Commons 디스플레이 3.0 비 이식 라이센스 .

일부러 기억하지 않아도 실수하면 반대로 하면 좋을 뿐이므로 특별히 문제 없다고 생각합니다

flexbox는?

원래의 HTML, CSS라고 옆에 늘어놓을 때는 우선 flexbox라는 것을 기억해… 오래된 것 같아.

elm-ui라고 물건을 늘어놓을 때는 아무것도 생각하지 않고 row 인가 column (을)를 사용하면 됩니다 (다른 선택사항이 거의 없다). 내용을 모르면 곤란할 때도 있을지도 모릅니다. 구현에는 flexbox가 사용됩니다.

flexbox에 대한 자세한 설명은 하지 않지만 게임만 소개합니다
FLEXBOX FROGGY
즐겁게 배울 수 있어!

숙제

패키지 문서에서 여러 Element를 받고 Element를 반환하는 함수에 무엇이 있는지 살펴 보겠습니다.

팁 : List (Element msg)에서 페이지를 검색하면 나올 것입니다.

끝에

오늘은 row와 column에서 요소를 가로 또는 세로로 정렬 할 수 있습니다.

다음은 모두 기다리기의 상하 좌우 중앙 정렬을 하려고 합니다