The wonders of CSS flexbox and the power of justify-content

Question

The wonders of CSS flexbox and the power of justify-content

I am working on a layout where I need three flex items (rows) in a flex container, and my requirement is to justify them as space-between... The first row will consist of cloud tags, the second will have a price, and the third will contain a Read more link.

However, there may be cases where only the last row (Read more link) needs to be displayed for specific items.

In such scenarios, to maintain consistency, I want the Read more link to always be positioned at the bottom of the container; but using space-between alone does not achieve this desired layout...

Is there a way to set a fallback justify-content property to end when there is only one child item present?

.container {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 20px;
}

.tags {
  display: flex;
}

.tags span {
  background-color: #f0f;
  padding: 10px;
  margin: 0 0 0 10px;
}

.price {
  display: flex;
  background-color: #ff0;
  padding: 10px;
  font-size: 150%
}

.read-more {
  display: flex;
  background-color: #0ff;
  padding: 10px;
}

<div class="container">
  <div class="tags">
    <span>tag 1</span><span>tag2</span><span>tag 3</span>
  </div>
  <div class="price">
    $100
  </div>
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

<div class="container">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

css flexbox

Answer 1

Answer №1

To rearrange the order of flex-items in your HTML code, you have the option to flip them and apply flex-direction: column-reverse; on the container. This will position the "read more" element as the initial flex-item, with the reversed direction at the container's bottom:

.container {
  background-color: #aaa;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 20px;
}

.tags {
  display: flex;
}

.tags span {
  background-color: #f0f;
  padding: 10px;
  margin: 0 0 0 10px;
}

.price {
  display: flex;
  background-color: #ff0;
  padding: 10px;
  font-size: 150%
}

.read-more {
  display: flex;
  background-color: #0ff;
  padding: 10px;
}

<div class="container">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
  <div class="price">
    $100
  </div>
  <div class="tags">
    <span>tag 1</span><span>tag2</span><span>tag 3</span>
  </div>
</div>

<div class="container">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

Answer 2

To rearrange the order of flex-items in your HTML code, you have the option to flip them and apply flex-direction: column-reverse; on the container. This will position the "read more" element as the initial flex-item, with the reversed direction at the container's bottom:

.container {
  background-color: #aaa;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 20px;
}

.tags {
  display: flex;
}

.tags span {
  background-color: #f0f;
  padding: 10px;
  margin: 0 0 0 10px;
}

.price {
  display: flex;
  background-color: #ff0;
  padding: 10px;
  font-size: 150%
}

.read-more {
  display: flex;
  background-color: #0ff;
  padding: 10px;
}

<div class="container">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
  <div class="price">
    $100
  </div>
  <div class="tags">
    <span>tag 1</span><span>tag2</span><span>tag 3</span>
  </div>
</div>

<div class="container">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

Answer 3

Answer №2

To position the container in the bottom right corner with the attributes

position: absolute; bottom: 0; right: 0;

, you can assign the container a position: relative; property, along with the .read-more class and the :only-child pseudo-class. This will ensure that when the read more link is the only child in the container, it will be placed at the desired location.

Using justify-content: end !important; does not achieve the same positioning effect as adding the specified attributes to the read more link.

Here's an example:

.container {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 20px;
  position:relative;
}

.tags {
  display: flex;
}

.tags span {
  background-color: #f0f;
  padding: 10px;
  margin: 0 0 0 10px;
}

.price {
  display: flex;
  background-color: #ff0;
  padding: 10px;
  font-size: 150%;
}

.read-more {
  display: flex;
  background-color: #0ff;
  padding: 10px;
}

.read-more:only-child{
    position:absolute;
    bottom:0;
    right:0;
}

<div class="container">
  <div class="tags">
    <span>tag 1</span><span>tag2</span><span>tag 3</span>
  </div>
  <div class="price">
    $100
  </div>
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

<div class="container">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

Answer 4

To position the container in the bottom right corner with the attributes

position: absolute; bottom: 0; right: 0;

, you can assign the container a position: relative; property, along with the .read-more class and the :only-child pseudo-class. This will ensure that when the read more link is the only child in the container, it will be placed at the desired location.

Using justify-content: end !important; does not achieve the same positioning effect as adding the specified attributes to the read more link.

Here's an example:

.container {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 20px;
  position:relative;
}

.tags {
  display: flex;
}

.tags span {
  background-color: #f0f;
  padding: 10px;
  margin: 0 0 0 10px;
}

.price {
  display: flex;
  background-color: #ff0;
  padding: 10px;
  font-size: 150%;
}

.read-more {
  display: flex;
  background-color: #0ff;
  padding: 10px;
}

.read-more:only-child{
    position:absolute;
    bottom:0;
    right:0;
}

<div class="container">
  <div class="tags">
    <span>tag 1</span><span>tag2</span><span>tag 3</span>
  </div>
  <div class="price">
    $100
  </div>
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

<div class="container">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

The wonders of CSS flexbox and the power of justify-content

Answer №1

Answer №2

Similar questions

What is the best way to ensure that a React app is always displayed in full screen

Difficulty in making Materialize.css column match the height of the entire row

Arranging shapes for varying levels of magnification

Responsive Div that Resizes Proportionally within Parent Container

Arranging React Grid Items with Stylish Overlapping Layout

Fade one element on top of another using Framer Motion

Exploring the World of Html

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

Using jQuery to create a div that animates when scrolling

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Issues with the presentation of HTML DIV elements

What are some methods for utilizing the "name" attribute within React components?

Applying styled numbering to elements using nth-child selector in

I'm having trouble getting my accordion menu to work properly. Whenever I click on the question title, the answer doesn't seem to show up or collapse. What could be causing this issue?

Encountering an error message stating that the "@font-face declaration does not adhere to the fontspring bulletproof syntax" while attempting to integrate a custom font

The grid area may not properly adjust based on the width size of the browser

The slideshow feature on W3 Schools does not start automatically when the page loads

How come I am unable to connect my CSS to my EJS files?

Ensuring the positioning of input fields and buttons are in perfect alignment