Q:

How to Set Space Between Flex Items Using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  379 
Very Easy
0

How to Set Space Between Flex Items Using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use CSS justify-content Property

You can simply use the CSS justify-content property with the value space-between to set space between flexbox items. In the following example the flex container has 4 items where each flex item has a width of 20%, and the remaining 20% space is distributed evenly between the flex items.

Let's try out this example out to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Distance Between Flexbox Items</title>
<style>
    .flex-container {
        height: 300px;
        border: 1px solid black;
        display: flex;
        justify-content: space-between;
    }
    .item {
        width: 20%;
        background: #b4bac0;
    }
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

In the above example the space between the flex items may vary depending on the width of the flex container. However, if you want to set a fixed space (e.g. 10px, 20px, etc.) between the flexbox items you can simply utilize the CSS padding and margin property.

In the following example the flexbox items will have a fixed margin around them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Fixed Space Between Flex Items</title>
<style>
    .flex-container {
        height: 300px;		
        display: flex;
        border: 1px solid black;
        padding: 10px;
    }
    .item {
        flex: auto;
        background: #b4bac0;
        margin: 10px;
    }
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now