---
tags: Web Studios 2 - Unit 1
---
# Unit 1 Lesson 2 - CSS Flexbox Containers
## Learning Objectives
In this lesson, you will learn the fundamentals of CSS Flexbox containers.
At the end of this lesson, you will create a Twitter post using CSS Flexbox.
## What is CSS Flexbox?
Flexbox is a mechanism for describing how components of a page behave across different devices and screen sizes that was introduced in CSS3. Flexbox, so named because of its adaptability, has various advantages over traditional layout methods, including dynamic rearrangement, alignment, direction, and container fit. Flexbox provides a developer to get full control over the behavior of page elements regardless of the device they are visiting from in an increasingly mobile world.
## Basics
"Regular" web layouts are based on both block and inline flow directions, the flex layout is based on the "flex-flow directions".
Items will be laid out following the main axis (from `main-start` to `main-end`) or cross-axis (from `cross-start` to `cross-end`)
* `main axis` – The `main axis` of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the `flex-direction` property.
* `main-start | main-end` – The flex items are placed within the container starting from main-start and going to main-end.
* `main size` – A flex item’s width or height, whichever is in the main dimension, is the item’s `main size`. The flex item’s `main size` property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
* `cross axis` – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
* `cross-start | cross-end `– Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
* `cross size` – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ is in the cross dimension.
## Flexbox Properties
There are two distinct elements of a flexbox:
1. Flex Container
2. Flex Items
The flex container is the parent component and the items are its children. In this lesson, you'll review the flex container.
### Parent Properties (Flex Container)
The flex container has several CSS properties for the manipulation of the said container.
Those properties are listed below:
#### `display`
The display property defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
```css
.container {
display: flex; /* or inline-flex*/
}
```
#### `flex-direction`
The `flex-direction` property establishes the main-axis, thus defining the direction flex items are placed in the flex container.
```css
/* The direction text is laid out in a line */
flex-direction: row;
/* Like <row>, but reversed */
flex-direction: row-reverse;
/* The direction in which lines of text are stacked */
flex-direction: column;
/* Like <column>, but reversed */
flex-direction: column-reverse;
```
#### `flex-wrap`
The `flex-wrap` property allows you to wrap flex items onto several lines. By default, flex items will all try to fit onto one line.
```css
/*All flex items will be on one line*/
flex-wrap: nowrap;
/*Flex items will wrap onto multiple lines, from top to bottom*/
flex-wrap: wrap;
/*Flex items will wrap onto multiple lines from bottom to top*/
flex-wrap: wrap-reverse;
```
#### `flex-flow`
The `flex-flow` property is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. The default value is row no wrap.
```css
.container {
flex-flow: column wrap;
}
```
#### `justify-content`
The `justify-content` property defines the alignment along the main axis. This helps distribute extra free space.
```css
/* Positional alignment */
/* Pack flex items from the start */
justify-content: flex-start;
/* Pack flex items from the end */
justify-content: flex-end;
/* Distributed alignment */
/* Distribute items evenly
* The first item is flush with the start, the last is flush with the end */
justify-content: space-between;
/* Distribute items evenly
* Items have a half-size space on either end */
justify-content: space-around;
/* Distribute items evenly
* Items have equal space around them */
justify-content: space-evenly;
/* Distribute items evenly
* Stretch 'auto'-sized items to fit the container */
justify-content: stretch;
```
#### `align-items`
The `align-items` property is similar to the `justify-content` for the cross axis which is perpendicular to the main-axis.
```css
/* Basic keywords */
align-items: normal;
align-items: stretch;
/* Positional alignment */
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
```
#### `align-content`
The `align-content` property aligns flex container's similarly to how `justify-content` aligns individual item with the main-axis.
```css
/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */
```
#### `gap`
The `gap` property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.
```css
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
```
## Project: Twitter Post
In this project, we'll style a clone of a Twitter post using Flexbox elements.
Copy and past the following HTML Code into the HTML Tab:
``` html
<!DOCTYPE html>
<html>
<div class="tweet-wrap">
<div class="tweet-header">
<img src="https://media.licdn.com/dms/image/C560BAQGPfp-GVLG3sg/company-logo_200_200/0/1638554174137?e=2147483647&v=beta&t=vzYEUlL5I38uURU7zR_FR72Go63KQFKEeJKZMhQpZu0" alt="" class="avatar">
<div class="tweet-header-info">
Jane Doe
<span>@JaneDoe123</span>
<span>. Jun 27</span>
<p>🔥 If you're tired of using outline styles for secondary buttons, a soft solid background based on the text color can be a great alternative.</p>
</div>
</div>
<div class="tweet-img-wrap">
<img src="https://pbs.twimg.com/media/Dgti2h0WkAEUPmT.png" alt="" class="tweet-img">
</div>
<div class="tweet-info-counts">
<div class="comments">
<svg class="feather feather-message-circle sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
<div class="comment-count">33</div>
</div>
<div class="retweets">
<svg class="feather feather-repeat sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
<div class="retweet-count">397</div>
</div>
<div class="likes">
<svg class="feather feather-heart sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<div class="likes-count">
2.6k
</div>
</div>
<div class="message">
<svg class="feather feather-send sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
</div>
</div>
</div>
</html>
```
If we run the code in our Editor it doesn't look very good because there is no CSS style. Let's add some in the CSS tab.
1. Using the body tag set the background color to a light grey color using this HEX code `#e6ecf0`.
```css
body {
background: #e6ecf0;
}
```
2. Now let’s design the Tweet. The Tweet will have several sections. Each section will have a class associated with it.
* The container holding the entire post
```css
.tweet-wrap {
/*CSS element go here */
}
```
* The contents of the tweet
```css
.tweet-content {
/*CSS element go here */
}
```
* An image
```css
.tweet-img-wrap {
/*CSS element go here */
}
```
* The post itself
```css
.tweet-post {
/*CSS element go here */
}
```
* The counts for replies, re-tweet, and likes
3. The Tweet container will look like the picture below:
The Tweet container will have a maximum width of `490px`. The background color will be white `#fff`, it will be centered on the web page using the margin element, the corners of the container will be rounded, and there should be `30px` of padding on all sides.
```css
.tweet-wrap {
max-width:490px;
background: #fff;
margin: 0 auto;
margin-top: 50px;
border-radius:3px;
padding: 30px;
border-bottom: 1px solid #e6ecf0;
border-top: 1px solid #e6ecf0;
}
```
4. The contents of the tweet will contain the user’s name (handle), date, user's avatar, and the actual tweet. The display element will be set to flex. We'll use the align-items element and flex-start value making the items align flush together.
```css
.tweet-content {
display: flex;
align-items:flex-start;
font-size: 14px;
}
```
5. As we know we can post pictures with our tweets. Let's create the wrap style for it. This one is very simple, to the left of the image we'll add 60px of padding.
```css
.tweet-img-wrap {
padding-left: 60px;
}
```
You'll notice that the image is still larger than life will need to set the maximum width to 100% of the tweet container.
```css
img {
max-width:100%;
}
```
6. The post font style will be different for a paragraph and span element.
```css
.tweet-post {
font-weight:bold;
}
.tweet-post span {
color:#657786;
font-weight:normal;
margin-left: 5px;
}
.tweet-post p {
font-weight:normal;
margin-top: 5px;
}
```
7. The counts for replies, re-tweet, and likes will have divs with different set margins.
```css
.tweet-info-counts {
display: flex;
margin-left: 60px;
margin-top: 10px;
}
.tweet-info-counts div {
display: flex;
margin-right: 20px;
}
.tweet-info-counts div svg {
color:#657786;
margin-right: 10px;
}
```
And there you have it! You have created your clone of a tweet. Now challenge yourself to make the design responsive.
Sign in with Wallet
Connect another wallet