Skip to content
This repository was archived by the owner on Mar 16, 2026. It is now read-only.

We can specify how flex items spread out from left to right, along th… #676

Merged
oldoc63 merged 1 commit into from
Mar 11, 2022
Merged

We can specify how flex items spread out from left to right, along th… #676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 29 additions & 22 deletions CSS/flexbox/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,39 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>
<title>Inline</title>
<title>Justify-content</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Inline-flex</h1>
<div class="container">
<div class="box">
<h3>1</h3>
</div>
<div class="box">
<h3>2</h3>
</div>
<div class="box">
<h3>3</h3>
</div>
<h1>Flex Start</h1>
<div class="container" id="flexstart">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container">
<div class="box">
<h3>1</h3>
</div>
<div class="box">
<h3>2</h3>
</div>
<div class="box">
<h3>3</h3>
</div>
<h1>Flex End</h1>
<div class="container" id="flexend">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Center</h1>
<div class="container" id="center">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Space Around</h1>
<div class="container" id="spacearound">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Space Between</h1>
<div class="container" id="spacebetween">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
37 changes: 32 additions & 5 deletions CSS/flexbox/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,41 @@ h1 {
}

.container {
width: 150px;
border: 1px solid grey;
display: inline-flex;
height: 150px;
width: 100%;
display: flex;
background-color: whitesmoke;
}

.box {
background-color: dodgerblue;
height: 75px;
width: 75px;
border: 1px solid turquoise;
width: 100px;
border: 1px solid lightgrey;
display: inline-block;
}

#flexstart {
display: flex;
justify-content: flex-start;
}

#flexend {
display: flex;
justify-content: flex-end;
}

#center {
display: flex;
justify-content: center;
}

#spacearound {
display: flex;
justify-content: space-around;
}

#spacebetween {
display: flex;
justify-content: space-between;
}