flex-direction: column を使ってみる #CSS

flex-direction: column を使ってみる

↓これと同じものを作ってみる

https://atom.io/

とりあえず要素を並べる

.parent {
    flex-direction: column;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <ul className="parent">
                <li>ATOM</li>
                <li>1.53.0</li>
                <li>macOS</li>
                <a href="">Download</a>
            </ul>
        </>
    )
}

形を整える

.parent {
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid #4e4b4d;
    list-style: none;
    display: inline-flex;
    padding: 0;
    text-align: center;
    color: #efdab9;
}

.item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em;

}

.item a {
    text-decoration: none;
    color: #efdab9;
}

.parent li+li {
    border-top: 1px solid #4e4b4d;
}

body {
    background-color: #343233;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <ul className="parent">
                <li className="item">ATOM</li>
                <li className="item">1.53.0</li>
                <li className="item">macOS</li>
                <li className="item"><a href="">download</a></li>
            </ul>
        </>
    )
}