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>

cssflexbox

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 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance the appearance of the Vaadin Details Expand Icon by customizing the default CSS styling

For my expand/unexpand feature, I am utilizing Vaadin Details. Div contentDiv = new Div(); Label label = new Label("Expand"); Details details = new Details(label, contentDiv); The current output looks like this: However, I want the expand ico ...

cssvaadinvaadin-flowvaadin14

Angular2 material dropdown menu

Currently, I am studying angular2 with its material design. One of the modules I am using is md-select for material and here is a snippet of my code: <md-select> <md-option value="1">1</md-option> <md-option value="2">2< ...

cssangularangular-material

Guide to updating the background color of an element with AngularJs when clicked

I've used AngularJS's ng-repeat to display a list of <div> elements. When I select one <div> (div1), its background color changes to blue. If I then click on another <div> (div2), div1's background returns to white and div ...

htmlcssangularjsangularjs-ng-repeatonfocus

A centered Bootstrap navigation bar on a WordPress site

My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) STYLES.CSS .navbar-default { ...

phphtmlcsswordpresstwitter-bootstrap

Position an element with absolute positioning to the right edge of a relative element

I have a situation where I need to align the end of a position absolute element with the end of a relative element, but the relative element's width is not fixed and may vary based on content. This scenario arises as I am creating a custom dropdown m ...

javascripthtmlcss

divs placed next to each other

I'm facing an issue with 4 divs within a parent div. I've used float:left in the style of all 4 divs to display them side by side. Although the divs are appearing next to each other, the height of the parent div is not adjusting to accommodate th ...

csshtml

Ways to eliminate the leading bullet point from an unordered list

I am currently working on creating a gallery of images using php and css. The images are placed in an unordered list as shown below: <ul style="list-style-type:none;"> <? while($data=mysql_fetch_row($result)) { $pic=$data[2]; if ($pic) { $ ...

phphtmlcss

Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...

cssangular

Eliminating the vertical scroll on a webpage with the help of Bootstrap 5's responsive design capabilities

I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design: https://i.sstatic.net/jo5Si.png However, there's an issue causing a vertical scroll bar to appear on the page. The culprit see ...

htmlcssbootstrap-5responsive

Error with Display of ASCII Character 62 in Superfish Menu

Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code &#62;, which historically has represented ">". Oddly enough, while viewing my website ...

htmlcssinternet-explorer-8superfish

Multiple card displays not working with Javascript Fetch API

I wrote a script that retrieves data from a URL and then organizes it into tables for display to the user. Initially, the script functioned correctly. However, I decided to enhance its flexibility by introducing two parameters - name and HTML div name wher ...

javascripthtmlcssbootstrap-4

Mobile device tab animation

I am facing a challenge with a tab containing four items that are vertically stacked on mobile devices. My goal is to animate the clicked li element to move to the bottom of the stack. After experimenting with CSS animations, I was able to achieve this eff ...

jquerycss

The jQuery animation concludes before its anticipated completion

I'm currently facing a small issue with a jQuery animation. The HTML code I have is as follows: <div id="menu"> <a id="menu-about" href="/">About...</a><br /> <a id="menu-ask" href="/">Ask me a question</a> ...

javascriptjquerycssanimationjquery-animate

JavaScript powered simple window

I am currently working on a basic modal that will open and display content. Unfortunately, I cannot add images to help illustrate the design, so I'll do my best to describe it in detail. The modal is linked to an image slider where the heading change ...

javascripthtmlcss

"Using Bootstrap's toast feature repositions every element on the

I am working on a website project and encountering an issue with a bootstrap toast. The toast currently appears in the top right corner, but I would like it to display above the carousel without affecting the layout. Instead, when the toast appears, it shi ...

javascripthtmlcssbootstrap-4

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF using a hidden canvas element. How ...

javascriptcsscanvassvgcanvg

Is it possible to assign a class to the initial word within a designated class?

How can I customize the first and second word of a specific class in my code? This is an example of my current code: <h2 class="content-heading">Latest News</h2> I would like to achieve something similar to this: <h2 class="content-headi ...

javascriptjqueryhtmlcss

Using PHP and MySQL to handle data submission through the POST method

When I send data to post[submit] and post[request], it's coming from two separate buttons. Even though I successfully submitted user_id to post[submit], I'm encountering difficulty in echoing the user_id in the request portion (post[request]). ...

javascriptphphtmlmysqlcss

Is there a way to create an X shape by rotating two divs when I click on the container div?

I currently have this setup: code Below is the HTML code: <div id="box"> <div id="line1" class="line"></div> <div id="line2" class="line"></div> <div id="line3" class="line"></div> </div> My go ...

javascriptjqueryhtmlcss

Customize the appearance of HTML5 input types when validation is unsuccessful

Hey everyone I have a question: Is there a CSS trick to style the red border (or shadow) of input fields that have not been validated, such as email inputs? If my explanation isn't clear enough, I'm referring to changing the color of this eleme ...

csshtmlstyling