cannot manipulate elements using CSS flexbox styling

I'm struggling to style the elements inside a div in a vertically aligned position.
Here is the code snippet. I am fairly new to CSS flexbox.

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container {
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}

#frameworks-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered;
  background-color: white;
  color: black;
  border-radius: 25px;
  font-weight: 800;
  line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width: 400px;
  height: auto;
}

.framework_rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: orangered;
  border-radius: 50%;
  text-align: center;
}
<div id="container">
  <div id="frameworks-wrapper">
    <h3>Favorites Web Frameworks ratings</h3>
    <div><span class="framework_rating">3</span>React</div>
    <div><span class="framework_rating">6</span>Blazor</div>
    <div><span class="framework_rating">2</span>Knockout.js</div>
  </div>
</div>

The rating and name should be on the same line. Any assistance would be greatly appreciated.

cssflexbox

Answer №1

If you want to keep elements in the same line within a div, a simple solution is to assign a class to the wrapping div:

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 
#container{
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}

#frameworks-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered; 
  background-color: white; 
  color: black;
  border-radius: 25px; 
  font-weight: 800; line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width:400px;
  height:auto;
}
.framework_rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: orangered;
    border-radius: 50%;
    text-align: center;
}

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 25%;
}
<body>
   <div id="container">
      <div id="frameworks-wrapper">
          <h3>Favorites Web Frameworks ratings</h3> 
          <div class="wrapper"><span class="framework_rating" >3</span>React</div>
          <div class="wrapper"><span class="framework_rating" >6</span>Blazor</div>
          <div class="wrapper"><span class="framework_rating" >2</span>Knockout.js</div>
      </div>
   </div>
</body>

Give this method a try and see if it works for your layout needs. Best wishes.

Answer №2

To achieve a flex layout in the frameworks-wrapper id, apply this CSS to the div element.

#frameworks-wrapper>div{
  display: flex;
}

If you need more information on using flexbox, check out this helpful flexbox guide

Answer №3

To enhance the styling of your content, simply insert some CSS within the designated div:

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 
#content-container{
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}

#components-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered; 
  background-color: white; 
  color: black;
  border-radius: 25px; 
  font-weight: 800; line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width:400px;
  height:auto;
}

#components-wrapper>div{
  width: 100px;
  display: flex;
  justify-content: space-between;
}

.component_rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: orangered;
    border-radius: 50%;
    text-align: center;
}
<body>
   <div id="content-container">
      <div id="components-wrapper">
          <h3>Popular Component Ratings</h3> 
          <div><span class="component_rating" >3</span>React</div>
          <div><span class="component_rating" >6</span>Angular</div>
          <div><span class="component_rating" >2</span>Vue.js</div>
      </div>
   </div>
</body>

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

How can I designate a specific .css file from the assets folder for my app to utilize?

I am currently working on a project to develop a web application dashboard using Dash. As I have multiple versions of the web app with different layouts, my goal is to have each version of the app use a specific .css file from the assets folder. However, ...

pythoncssplotly-dash

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

javascripthtmlcss

What are some ways to implement CSS2 specifications in case CSS3 support is not detected by the browser?

I am currently working on a website using HTML5 and CSS3, but I also need it to be compatible with older browsers. Although I am using the Modernizr library, it does not allow me to replace certain CSS3 elements with CSS2 alternatives. For example, I have ...

htmlcss

Spans are not creating hyperlinks within anchors

Check out the full code. Here's the relevant code snippet: <a href='http://app.bithumor.co/report_post?id=568'><span class='report_icon'></span></a> Using CSS: <style> .report_icon { width: 60p ...

htmlcss

Having trouble with the float not working for the main content below the sidebar? Stay tuned

Here is the layout I am working with: .page-wrapper { height: 100%; min-height: 970px; position: relative; } .pageheader { min-height: 50px; position: fixed; min-width: 100%; } .navbar-fixed-top { top: 0; } .page-sidebar { float: left ...

htmlcssstylesfrontend

Changing the text color using jQuery is proving to be difficult for me

I've been trying to apply a styling condition using an if statement in my jQuery code based on the result from an API, but for some reason, I'm not seeing the color change. I have given an ID to try and change the color through CSS. $.getJSON(API ...

jquerycssapidombootstrap-5

Using jQuery to create Vertical Tabs that showcase tab content in an inline-block format

When using jQuery tabs, I recently switched to vertical tabs and noticed that the content is not positioned within the space after the tabs. Instead, it is placed inside a container div with a margin, giving the appearance of being contained within that bo ...

javascriptjqueryhtmlcsstabs

Tips for centering the brand in Bootstrap 5 navbar

I've been attempting to center a Bootstrap 5 navbar, but so far I haven't had any luck. My goal is to have both the logo and links centered, but when the screen size is too small, the navbar still collapses using the toggler. Here is the code I&a ...

htmlcssweb-applicationsnavbarbootstrap-5

Manipulating intricate CSS properties with JavaScript

Can anyone explain how to implement the CSS shown below in JavaScript? #absoluteCenter { left: 50% !important; top: 50% !important; -webkit-transform:translate(-50%,-50%)!important; -moz-transform:translate(-50%,-50%)!important; -ms-tr ...

javascriptcss

Why isn't my .gif animation appearing on Google Chrome? Can anyone suggest a reason for this issue?

const urlToLoad = "winners.php"; const ajaxLoader = '<div class="preloaders"><img src="img/preloader.gif" alt="Loading..."></div>'; $(".page").click(function(){ $(".main").html(ajaxLoader).load(urlToLoad); }); I am trying ...

jqueryhtmlcssgoogle-chromeanimated-gif

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

Having trouble determining why the design is not displaying correctly

I'm currently working on a calendar webpage, and everything looks perfect until I add the new JavaScript element. Suddenly, the numbers in the first row start behaving strangely. I've tried to troubleshoot but can't seem to figure out what&a ...

javascripthtmlcss

I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here Seeking gui ...

cssresponsive-designresponsiveweb-frontendresponsiveness

I am seeing the number 1 mysteriously popping up on my HTML page without my intervention

Working on a website design, I encountered an issue with my HTML code. When executing and displaying content from a PHP file on the page, a strange number 1 is added after parsing the PHP file's content. Here is the snippet of HTML and PHP causing th ...

phpcsshtml

Stop the bootstrap accordion from expanding when a button in its header is clicked

Currently, I am facing an issue with two action buttons located in the header of an accordion. Here is the setup: https://i.sstatic.net/HU2Kp.png Whenever I click on one of these buttons, it toggles the accordion's state. I have attempted to use e.p ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...

cssinlinevertical-alignmentlistitem

Click to alter the style of an <li> element

I'm currently using Angular CLI and I have a menu list that I want to customize. Specifically, I want to change the background color of the <li> element when it is clicked. I am passing an id to the changeColor() function, but unfortunately, I a ...

htmlcssangulartypescript

Guide to utilizing CSS Flexbox for flexible alignment of containers with various heights and sizes

I'm currently experimenting with CSS flexbox to create a grid layout where an image in one div spans the entire length of the parent div, while four other divs form a 2x2 grid next to it. Here's an example of what I'm trying to achieve: http ...

htmlcssflexbox

Is it feasible to embed Instagram in an iframe without using the API?

Is there an alternative method to embed Instagram using iframe without the need for an API? ...

javascripthtmlcss

Assistance with embedding html characters into a page title

While this issue isn't urgent, knowing the solution would be really beneficial to me. I've been following Ryan Bates' technique for adding titles to pages, and I must say, he's a fantastic pioneer and asset to the Rails community, don&a ...

htmlruby-on-railscssruby-on-rails-3