Arranging flex items in a row next to another flexbox container with aligned direction

Is it possible to mix flex directions column and row within the same div?

Let's take a look at an example:

https://i.sstatic.net/Gumu5.png

.container {
  display: flex;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <div class="right-icons">
      <img src="https://via.placeholder.com/20">
      <img src="https://via.placeholder.com/20">
    </div>
    <p>More Text</p>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

Originally, I thought I could achieve this layout within the same div. Is that feasible?

htmlcsssassflexbox

Answer №1

To enhance your `right-icons`, simply introduce an additional level and utilize `flex`.

.container {
  display: flex;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.icon {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.right .right-icons {
  display: flex;
}

p {
  margin: 0;
}
<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <div class="right-icons">
      <div class="icon">
        <img src="https://via.placeholder.com/20"> 21
      </div>
      <div class="icon">
        <img src="https://via.placeholder.com/20"> 22
      </div>
      <p>More Text</p>
    </div>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

Answer №2

This updated version of your design introduces a higher level of complexity compared to the original layout you had.

If you are looking for more control and versatility in positioning and aligning your elements, I recommend utilizing CSS grid layout instead of flexbox.

Below is a demonstration featuring HTML5 semantic markup:

article {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);
  height: 200px; /* for demo only */
  align-items: center;
  
  grid-template-areas:  " figure   .      .    .    . . . . .    .       .    .  "
                        " figure name  name  name   . . . .  duration alert date . "
                        " figure title title title  . . . .     .      .    favorite . "
                        " figure   .      .    .    . . . .     .      .       .   . ";
}

figure     { grid-area: figure; }
.name      { grid-area: name; }
.title     { grid-area: title; }
.duration  { grid-area: duration; }
.alert     { grid-area: alert; }
.date      { grid-area: date; white-space: nowrap; text-align: right; }
.favorite  { grid-area: favorite; text-align: right; }
<article>
  <figure>
    <img src="https://via.placeholder.com/150">
  </figure>
  <section class="name">
    <p>Text Text</p>
  </section>
  <section class="title">
    <p>Text Text</p>
  </section>
  <section class="duration">
    <img src="https://via.placeholder.com/20">
  </section>
  <section class="alert">
    <img src="https://via.placeholder.com/20">
  </section>
  <section class="date">
    <p>More Text</p>
  </section>
  <section class="favorite">
    <img src="https://via.placeholder.com/20">
  </section>
</article>

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

Prevent the Stop Function from being executed repeatedly while scrolling

I have implemented infinite scrolling in my react/redux app. As the user nears the bottom of the page, more contents are loaded dynamically. However, a challenge arises when the user scrolls too fast and triggers the function responsible for fetching cont ...

javascripthtmlreactjs

Experiment with altering the layout of certain navigation bars

I am currently attempting to customize the background color and text color for specific HTML components. Within my project, there are 3 navigation bars. I aim to establish a default color for all nav bars while also altering the specific color of one of t ...

htmlcss

Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that sho ...

javascripthtmlcss

I am looking to create a header design that is fully responsive and resembles the example shown in the image. How can I achieve

Currently, I am working on creating a responsive header for a website. The image provided is a rough draft of the header design that I am aiming to achieve. I attempted to form the shape using an SVG path but encountered difficulties in making it fully res ...

htmlcss

Creating a customized conditional overflow style in _document.js for Next.js

Is there a way to dynamically change the overflow style for the html and body elements based on the page being viewed? For instance, on the about page, I want to hide overflow for html but not for body, whereas on the contact page, I want to hide overflow ...

javascriptcssreactjsnext.js

Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out. Here is the HT ...

jqueryhtmlcssanchor

Utilizing Bootstrap 4 to ensure the final DIV is vertically stacked and fills the remaining space in the container

Having trouble creating a responsive layout using Bootstrap 4? Specifically, when two divs wrap vertically on smaller devices, the top div pushes the lower div down, exceeding the parent container. I want the lower div to fit within the container. How can ...

htmlcssbootstrap-4

"Utilize a 3-column layout with the center column aligned to the

I am working on an interesting task. <div class="slider"> <div class="1s">1st slide</div> <div class="2s">2nd slide</div> <div class="3s">3d slide</div> </div> Here is the CSS code: .slider div { ...

csshtmlslider

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

javascriptphphtmlforms

What is the best way to update or include a new class in the jQuery mobile loader widget?

After reviewing the documentation at this link: I discovered a method to modify or add the default class of the loader widget, ui-loader. Despite my attempts, I have not been able to see any changes. You can view my demo here: https://jsfiddle.net/yusril ...

jquerycssjquery-uijquery-mobile

What is the best way to remove column and row gaps in a Bootstrap grid system?

Despite adjusting padding with the image, div section, and grid gap to 0px in the grid layout, the image still fails to cover the entire cell. I am seeking a solution to eliminate these unwanted paddings that are highlighted in blue. The Bootstrap 5 .g-0 ...

htmlcssbootstrap-5

Expanding the hover state of a Bootstrap button

I am currently working on a website with bootstrap 4 and I am utilizing the bootstrap cards, which includes the primary button (btn-primary). My goal is to trigger the hover state of the button when hovering over the card itself. Is there a way to achieve ...

htmlcssbootstrap-4

Disable blur effect on child element with relative positioning

Is there a way to create a background blur effect using material cards without affecting a specific div? <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/ ...

htmlcssmaterial-design

Get rid of the box-shadow on the Vuetify element

I currently have a special-table component that includes a box shadow when the row is expanded https://i.stack.imgur.com/8zgjp.png I am aiming for the removal of the box-shadow effect. After inspecting the console-style tab, I identified https://i.stac ...

cssvue.jsvuejs2vue-componentvuetify.js

What steps do I need to follow in order to modify a CSS style definition to create a border around

I currently have a CSS style defined as follows: [class*="col-"] { border: 1px solid #dddddd; } This particular CSS definition gives borders to all of the bootstrap grid columns on my page. However, I now want to apply borders only to the bootstrap ...

cssangularjstwitter-bootstrap

Styling text in table cells using only CSS, without the use of scripting, based on the values within those cells

I have scoured the forum and came across several older threads that suggest it is not achievable with just CSS (the system I am utilizing does not support scripts). Is there a possibility that this has changed or if someone else has an alternative idea? W ...

htmlcss

Showing a diverse range of data types with null values in the Django admin list_display

My explanation of the title might have been unclear. I have a simple chat application where users can send text, audio, video, or images. To render these messages, I have a method that checks the message type and renders it accordingly. If the message is t ...

pythonhtmldjangodjango-admindjango-admin-actions

Guide to making a dropdown menu that pulls information from a text box and displays the location within the text

I'm currently working on a unique dropdown feature that functions like a regular text field, displaying the text position. To achieve this, I've constructed a hidden dropdown menu positioned beneath the text field. My goal is to develop a jQuery ...

javascriptjqueryhtmlcss

What could be the reason for an iOS web app to become unresponsive on the initial loading screen?

I recently completed the development of an HTML5 webapp, and during my local server tests on desktop browsers, iOS Safari, and as a homescreen bookmark webapp, everything ran smoothly. The offline functionality with the cache.manifest file also worked flaw ...

ioshtmlsplash-screenfreezeiphone-standalone-web-app

Utilizing a loop for setting variable values in JavaScript

Using both JavaScript and JQuery. Let's imagine there is an array called ListArray with various sentences inside. Sounds easy enough. Is there a way to achieve this? var List = for (var i = 0; i < 10; i++) { //iterate over an array here to c ...

javascriptjqueryhtmlarrayslist