<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1729430002316/cb002d4a-8799-4e33-9c2d-119dfc47bc1a.png" alt class="image--center mx-auto" />
<ul>
<li>Using <code>flex</code> together with media queries to create a different layout for different screen sizes/devices:
</li>
<li>The 5 button goes to different pages and have a their own content.
</li>
</ul>
<h3 id="heading-css-property-that-i-used">CSS property that I used:</h3>
<ul>
<li>Flex Container: The parent element with <code>display: flex;</code> defines a flex container. It can be customized with properties like <code>flex-direction</code>, <code>flex-wrap</code>, and <code>justify-content</code>.
</li>
<li>Media queries for to create a different layout for different screen sizes/devices
</li>
</ul>
GitHub repo: <a target="_blank" href="https://github.com/Koronuma4Dev/CSS_FLEX">https://github.com/Koronuma4Dev/CSS_FLEX</a>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1729430002316/cb002d4a-8799-4e33-9c2d-119dfc47bc1a.png align="center")

* Using `flex` together with **media queries** to create a different layout for different screen sizes/devices:
    
* The 5 button goes to different pages and have a their own content.
    

### **CSS property that I used:**

* **Flex Container**: The parent element with `display: flex;` defines a flex container. It can be customized with properties like `flex-direction`, `flex-wrap`, and `justify-content`.
    
* Media queries for to create a different layout for different screen sizes/devices
    

***GitHub repo:*** [https://github.com/Koronuma4Dev/CSS\_FLEX](https://github.com/Koronuma4Dev/CSS_FLEX)

Activity 26: CSS FLEX

CSS property that I used: