본문으로 건너뛰기

Flexbox Basics

Flexbox Basics

Flexbox is like Lego blocks. By combining Lego blocks of various shapes and sizes, you can create the object you want.

Flexbox allows you to arrange and align various elements of a web page, enabling you to create a webpage in the shape you desire.

Previously, to center content vertically and horizontally, you had to implement it in a very complicated way with the existing CSS method.

But with Flexbox, you can easily solve it with just a few lines of code.

CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

Advantages of Flexbox

Using Flexbox, you can solve complex problems such as layouts, alignment, and spacing adjustments more simply and clearly.

It helps you to easily understand and code the relationships between elements when creating websites with complex structures.


Flex Containers & Flex Items

  • Flex Container: The parent element to which the Flexbox layout is applied, and its child elements are referred to as Flex Items.

  • Flex Items: Individual elements inside a Flex Container, which are aligned and positioned according to the properties of the Container.


Basic Usage

CSS
.container {
display: flex;
}

By adding the display: flex; property to CSS as shown above, the element becomes a Flex Container, and all its child elements automatically become Flex Items.


Key Flexbox Properties

  1. display: flex;

This is the most fundamental property that defines a Flex Container. By applying this property, the child elements become Flex Items and can take advantage of the features of Flexbox.

CSS
.container {
display: flex;
}

  1. flex-direction

This property defines the direction in which Flex Items are placed. If set to row, the items are laid out in a horizontal direction; if set to column, they are laid out in a vertical direction.

CSS
.container {
flex-direction: row; /* or column */
}

  1. flex-wrap

This property determines whether the items are laid out in a single line or multiple lines. Setting it to nowrap will keep the items within a single line, whereas wrap allows the items to be spread over multiple lines if the content overflows.

CSS
.container {
flex-wrap: nowrap; /* or wrap */
}

Practice

Creating a Simple Flexbox Layout

HTML
<div class="flex-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
CSS
.flex-container {
display: flex;
gap: 20px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.box {
padding: 30px;
font-weight: bold;
font-size: 20px;
text-align: center;
background-color: #c8e6c9;
border-radius: 5px;
}

Follow the asterisk-highlighted part of the code to try inputting it.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!