Dahye Ji

Posted on Nov 15, 2021

Font, Flexbox practice

#css #font #flexbox #flex

Font

Note

Try not to use more than two fonts per project. If it's only used for couple times, better to make them as images and use because fonts are quite heavy.
Don't forget to check copyrights (if it can be used commercially free!)

Using @font-face & custom property(variable)

@font-face {
  font-family: 'Cafe24SsurroundAir';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* using custom property(variable) when using font. it's good to use if the font name is long */
:root {
  --main-font: Cafe24SsurroundAir;
}

p {
  font-family: var(--main-font);
}

Using downloaded font / trueType

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font-3</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        @font-face {
            /* You can also make it shorter! */
            font-family: 'Gm';
            src: url(../font_file//GmarketSansTTFLight.ttf) format('trueType');
        }

        p {
            font-family: 'Gm';
        }

        strong {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>안녕하세요~~! <strong>지마켓 폰트</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Est soluta enim magnam,
        aperiam quos
        quae
        inventore
        tempore facere, reiciendis voluptates ratione accusantium officia repellat error? Laborum numquam pariatur
        consequatur est!</p>
</body>

</html>

Using link

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font-2</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        p {
            font-family: 'Nanum Pen Script', cursive;
        }
    </style>
</head>

<body>
    <p>안녕하세요! Lorem ipsum dolor sit amet consectetur adipisicing elit. Est soluta enim magnam, aperiam quos quae
        inventore
        tempore facere, reiciendis voluptates ratione accusantium officia repellat error? Laborum numquam pariatur
        consequatur est!</p>
</body>

</html>

Things to read

about optimising font

why use rem?

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15?gi=2b83a081d66

`<flex-grow>`

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container {
            display: flex;
            height: 300px;
            margin: 10px;
            /* flex-direction: column; */
        }

        .items {
            border: 2px solid black;
            border-radius: 6px;
            background-color: pink;
            margin: 10px;

        }

        .items:nth-child(1) {
            flex-grow: 5;
        }

        .items:nth-child(2) {
            flex-grow: 3;
        }

    </style>
</head>

<body>

    <div class="container">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
</body>

</html>

flex-grow and flex-shrink: accept unitless value that serves as proportion. If an item has flex-grow or flex-shrink value, it grows or shrink.
If flex-shrink: 0, it will not shrink but it will shrink from value of 1.

`flex-basis`

:It only works if the element is a flex item. It's not width or height but more like proportion of its axis.
if flex-direction: row, this will take space based on x-axis and flex-direction: column, it will take space based on y-axis.

`flex`

: shorthand for flex-grow, flex-shrink and flex-basis combined.
** It is recommended that you use this shorthand property rather than set the individual properties.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container {
            display: flex;
            height: 300px;
            margin: 10px;
            /* flex-direction: column; */
        }

        .items {
            border: 2px solid black;
            border-radius: 6px;
            background-color: pink;
            margin: 10px;

        }

        .items:nth-child(1) {
            flex: 1;
        }

        .items:nth-child(2) {
            /* flex-basis: 200px; */
            flex: 200px;

        }

        .items:nth-child(3) {
            flex: 1;
        }

        .items:nth-child(4) {
            flex: 1;
        }

        .items:nth-child(5) {
            flex: 1;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
</body>

</html>

`flex-wrap`

It's good to use for responsive design!
If elements are flex item and have value of flex-wrap: wrap, flex items goes to the next line automatically when the screen gets smaller.

`flex-flow`

It's a shorthand for the flex-direction and flex-wrap. The default value is row and nowrap.

/* example */
.container {
  flex-flow: column wrap;
}

Flexbox practice

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../reset.css">
    <title></title>
    <style>
        body {
            display: flex;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        header {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2d3436;
        }

        nav {
            width: 96%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #dfe6e9;
        }

        nav ul {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
            width: 92%;
            background-color: #74b9ff;
            margin: 0 20px;
        }

        ul li {
            width: 30%;
            background-color: #e84393;
            margin: 0 14px;
        }

        main {
            width: 100%;
            background-color: #dfe6e9;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        section {
            display: flex;
            width: 70%;
            justify-content: space-around;
            align-items: center;
            width: 72%;

            background-color: #00cec9;
        }

        article {
            width: 45%;
            background-color: #dfe6e9;
            margin: 20px;
        }

        aside {
            flex: 1;
            background-color: #636e72;
        }

        footer {
            width: 100%;
            background-color: #fdcb6e;
        }

        @media screen and (max-width: 1000px) {
            section {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
            }

            article {
                width: 80%;
            }
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li>menu</li>
                <li>menu</li>
            </ul>
            <ul>
                <li>menu</li>
                <li>menu</li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati asperiores, saepe nihil nulla
                laborum eligendi rerum possimus ullam doloribus iure quis, quos soluta vero quas esse voluptatibus fuga
                numquam fugiat?
                Modi, quo! Aspernatur ullam sed maxime illum quisquam voluptatibus incidunt dolorum sint non fuga
                excepturi veniam ratione nihil, culpa temporibus reprehenderit aliquam voluptas eius obcaecati itaque
                atque aperiam odio. Deserunt.</article>
            <article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi commodi provident delectus beatae
                dolorem explicabo fugit, maxime sit modi cum saepe dolores recusandae! Nostrum unde sequi, provident hic
                alias nisi.
                Corrupti provident blanditiis tempore. Magni facilis incidunt fugiat quis quasi corrupti cum ut
                laudantium eum, hic recusandae cupiditate consequatur, magnam, eligendi vero odio sit reprehenderit
                placeat dolores esse officia. Incidunt?</article>
        </section>
        <aside>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi commodi provident delectus beatae
            dolorem explicabo fugit, maxime sit modi cum saepe dolores recusandae! Nostrum unde sequi, provident hic
            alias nisi.
            Corrupti provident blanditiis tempore. Magni facilis incidunt fugiat quis quasi corrupti cum ut
            laudantium eum, hic recusandae cupiditate consequatur, magnam, eligendi vero odio sit reprehenderit
            placeat dolores esse officia. Incidunt?</aside>
    </main>
    <footer>footer</footer>
</body>

</html>

DEV Community

Font, Flexbox practice

Font

Note

Using @font-face & custom property(variable)

Using downloaded font / trueType

Using link

Things to read

`<flex-grow>`

`flex-basis`

`flex`

`flex-wrap`

`flex-flow`

Flexbox practice

Top comments (0)

Read next

Flexbox – The Modern Way to Align and Distribute Space

11 New Features and Functions Arriving in CSS

Button Shrink Animation Tutorial

Lightmode & Darkmode