The elements of the second flex item should also be arranged in a line next to each other

<script src="https://use.fontawesome.com/2a2c577e07.js"></script>
<div class="parent-flex">
  <div class="class1">Class 1</div>
  <div class="class2">
    <img src="http://farm4.static.flickr.com/3140/3506456511_43787ce7e6.jpg" alt="">
    <h4> The author | </h4>
    <ul>
      <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
    </ul>
    <p>The dummy text text</p>
  </div>
</div>

CSS

.parent-flex {
  display: flex;
}    
.class2 {
  margin-left: auto;
}
ul {
  list-style-type: none;
}

SITUATION: .class2 is the 2nd child of a parent, which is a flex. .class 2 has items like img h2 ul with fontawesome items p

I want all the items to align in one line. Is there any flex property that can achieve this effect quickly, or perhaps another method for responsiveness?

htmlcssflexbox

Answer №1

To achieve a side-by-side alignment of all elements and their children, you can apply the display: flex property to both class2 and ul.

The reason for adding the display: flex multiple times is that it only impacts one level down. In your initial code, only the class1 and class2 elements are transformed into flex items and align horizontally.

.parent-flex {
  display: flex;
  align-items: center;
}
.class2 {
  display: flex;
  align-items: center;
  /*margin-left: auto;*/    /*  temporary removal, uncomment if all
                                its elements should align right  */ 
}
ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}
img {
  height: 100px;
}
<script src="https://use.fontawesome.com/2a2c577e07.js"></script>
<div class="parent-flex">

  <div class="class1">Class 1</div>
  <div class="class2">
    <img src="http://farm4.static.flickr.com/3140/3506456511_43787ce7e6.jpg" alt="">
    <h4> The author | </h4>
    <ul>
      <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
    </ul>
    <p>The dummy text text</p>
  </div>
</div>

Answer №2

Make sure to include the flex property for the second child element as well.

.parent-flex {
  display: flex;
}

.class2 {
  display: flex;
  margin-left: auto;
}

ul {
  list-style-type: none;
}
<script src="https://use.fontawesome.com/2a2c577e07.js"></script>
<div class="parent-flex">
  <div class="class1">Class 1</div>
  <div class="class2">
    <img src="http://farm4.static.flickr.com/3140/3506456511_43787ce7e6.jpg" alt="">
    <h4> The author | </h4>
    <ul>
      <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
    </ul>
    <p>The dummy text text</p>
  </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

Utilizing checkboxes to toggle the visibility of a div element with varying headings

By toggling a checkbox, I aim to show or hide the same div with a different heading. $('#cbxShowHide').click(function() { this.checked ? $('#block').show(1000) : $('#block').hide(1000); }); #block { display: none; bac ...

javascriptjquerycsscheckbox

Placing an object to the right side

I'm currently developing an app using React Native and I need to position something on the right side of the screen. <View style={searchDrop}> <TextInput style={textInput} placeholder="Search Coin ...

javascriptcssreact-native

Creating a sticky positioning effect in CSS

Can someone assist me in implementing the position: sticky as demonstrated below? Currently, the upcoming date overlaps the current date. This causes the opacity and shadow of the date to reach 100%, which can create a cluttered appearance if there are m ...

htmlcss

2 column setup in the last row of a CSS grid

Can anyone help me troubleshoot an issue with aligning two buttons to the right in a form using CSS grid? I've attached a screenshot for reference. https://i.stack.imgur.com/DFGrx.png **css ** .wrapper { width:75%; padding-top: 15px; padd ...

cssgridcss-grid

Align audio and video elements in HTML5 using JavaScript

I am facing a situation where I have two files - one is a video file without volume and the other is an audio file. I am trying to play both of these files using <audio> and <video> tags. My goal is to make sure that both files are ready to pla ...

javascripthtmlaudiovideo

Tips on saving a form submit button data to localStorage

As a newcomer, I am on a quest to make this function properly. My goal is to create a form where the submit button saves data to the localStorage. Here's what I have tried thus far. <script> function storeRecipe() { localStorage.setItem($(" ...

javascripthtmlcss

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

I need help redirecting to a new page upon button click using a JS function. The URL needs to include an email address parameter. <form> <input type="email" id="mail" placeholder="ENTER YOUR EMAIL ADDRESS" requir ...

javascripthtml

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

phpjavascriptjqueryhtmlforms

Tips for transforming numerical date data into a string format

Is there a method to convert the numeric month in a table into a string format? <table style="width: 100%;"> <tr> <th>Date</th> <th>Total</th> </tr> <tr> <td id="date ...

javascripthtml

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Don't forget to retain the checkboxes that were chosen in the

I am looking for a solution to a specific scenario. When I open a modal box and check some checkboxes, I want those same checkboxes to be selected the next time I open it. Below is an example of my code. Main Controller modal function function openModa ...

javascripthtmlangularjscheckboxmodal-dialog

In the event of a 404 error, simply direct the user to the pageNotFound before ultimately guiding them back

I'm developing a website with Node JS and I want to implement a feature where if the user attempts to navigate to a non-existent page, they are redirected to a "Page Not Found" message before being automatically taken back to the home page after a few ...

javascripthtmlnode.jsejs

Guide to altering the color of a list item when hovering in HTML

Is there a way to change the color of the <li> element only when hovering over it, without affecting its parent or child elements? Here is an example: HTML: <div id="tree"> <ul> <li>apple</li> <li>banana</l ...

javascriptjqueryhtmlcss

Safari not fully supporting CSS translate functionality

When I click a button on my app, an element slides into view and then slides out when I click the button again. This is achieved using a combination of CSS and JS. It works perfectly in Chrome and Firefox, but only partially in Safari. In Safari, the elem ...

csssafaricss-transitionscss-transforms

Developing an object that displays animated effects when modifying its properties, such as visibility, and more

Exploring the realm of animations in JavaScript and AngularJS has led me to the idea of creating a unique JavaScript object. Imagine having the ability to define an object where setting an attribute like obj.visible = true Would automatically make the ...

javascripthtmlcssangularjsionic-framework

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

I need help with customizing the styling of an input form switch in Material UI. I want the track and button to turn red when the switch is on, similar to this example. I have tried using the withStyles method following examples on the Material UI website, ...

cssreactjsmaterial-ui

ag-grid allows for selecting multiple rows without the need to press the Control Key

In order to select a maximum of two rows without pressing the Ctrl button, similar to single row selection behavior, we need to ensure that if the user selects more than two rows, the first selected row is automatically deselected and only the latest two ...

jqueryhtmlangularjsag-grid

Getting the value of an HTML tag returned from an Ajax request

After making an AJAX call in VBScript, I am receiving the following HTML: <html> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="100%" ...

javascriptjqueryhtmlajax

Leveraging Enum with sec:authorize="hasRole(...)" for user authentication in a Spring Boot and Thymeleaf application

Trying to make a change: <div sec:authorize="hasRole('ADMIN')"></div> to: <div sec:authorize="hasRole(${T(com.mypackage.Role).ADMIN.getText()})"></div> However, the above modification is not working. ...

htmlspring-bootspring-securitythymeleafspring-thymeleaf

What are the solutions for addressing popping behavior during hover effects?

Hello everyone, I am experiencing an issue with the image hover effect on my website. How can I make it enlarge smoothly instead of just fading in and out? To better demonstrate, I have provided a helpful example https://i.stack.imgur.com/TcZKy.jpg Any as ...

htmlcsshovercss-transitionscross-fade