I have the following simple html code for a simple template:
<!DOCTYPE html>
<html>
<head>
<title>My new website</title>
<meta name="description" content="Simple website styled using flex box layout">
<meta http-equiv="refresh" content="60">
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div class="mainContainer">
<nav class="mainMenu">
<ol>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ol>
</nav>
<div class="mainArea">
<aside class="leftBar">
<h3>Navigation side bar</h3>
<p>Still need to think better what I will implement here.</p>
</aside>
<article class="mainContent">
<h1>Welcome!</h1>
<p>Nice to meet you...</p>
</article>
<aside class="rightBar">
<h3>News</h3>
<p>No news for now.</p>
</aside>
</div>
<footer class="mainFooter">
<p>Copyright ©
someone
</p>
</footer>
</div>
</body>
</html>
But the layout broke after I added <!DOCTYPE html> at the beginning of the html code. Now it looks like this:
But it should look like this:
Not only the margins broke, for example also the navigation bar is not exactly how it should be. I searched around for a solution, and there are some problems related, but I simply cannot understand why there this problem.
Here you have the CSS code:
html, body{
height: 100%;
width:auto;
font: 14px Arial;
color:white;
background: #444;
}
/* links */
a{
text-decoration: none;
color: #00aefb;
}
a:visited{
color:#008efb;
}
a:hover{
color: #999;
}
/* flex elements */
.mainContainer, .mainFooter, .mainArea, .mainMenu, .mainMenu ol{
display: flex;
display: -webkit-flex;
display: -moz-flex;
}
/* Main container */
.mainContainer{
font-family: Georgia;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}
/* mainMenu and footer */
.mainMenu, .mainFooter{
background: #555;
border: 1px solid white;
border-radius: 2px;
padding: 10px;
}
/* Just footer */
.mainFooter {
text-align: center;
font: 15px Arial;
min-height: 60px;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
}
/* Main area of contents */
.mainArea{
color: white;
border: 1px solid white;
border-radius: 2px;
margin: 20 0 20 0;
min-height:800px;
}
/* Main area of the main area */
.mainContent{
background: #eee;
color: black;
padding:20px;
flex: 2 2 50%;
-webkit-flex: 2 2 50%;
-moz-flex: 2 2 50%;
}
/* Left and right side bars */
.leftBar, .rightBar{
padding: 10px;
flex: 1 1 15%;
-webkit-flex: 1 1 15%;
-moz-flex: 1 1 15%;
}
/* mainMenu bar at the top */
.mainMenu {
font: 16px Arial;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
padding: 0;
}
.mainMenu ol {
list-style: none;
padding: 0; /* Removes annoying indentation */
margin: 0;
text-align: center;
}
.mainMenu ol li{
display: inline;
padding: 20px;
margin: 0 30 0 30;
}
li:hover, li.active{
background: #222;
color: #999;
border-radius: 5px;
}
#media all and(max-width: 640px){
.mainArea{
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}
.mainMenu {
font: 18px Arial;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}
.mainMenu ol {
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
align-items:stretch;
-webkit-align-items:stretch;
-moz-align-items:stretch;
}
.mainMenu ol li {
margin: 0;
padding: 10px;
}
.mainContainer .mainArea {
border: 0;
border-radius: 0;
}
.mainContent{
order: -1;
-webkit-order: -1;
-moz-order: -1;
margin: 0 0 20 0;
border: 1px solid white;
border-radius: 2px;
}
.leftBar {
margin: 0 0 20 0;
border: 1px solid white;
border-radius: 2px;
}
.rightBar{
border: 1px solid white;
border-radius: 2px;
}
}
I wouldn't say that adding <!DOCTYPE html> breaks out the layout. The doctype tells the browser how to interpret the HTML and CSS, if you don't specify one, then the browser goes in quirk mode, and the display is different from a strict mode.
By adding the <!doctype html>, some of your CSS styles become incorrect and the browser does interpret them the best way that it can. For example, one of the issues that you have is that there are some non-zero numeric values without specifying the unit (e.g.: margin: 20 0 20 0;).
You are missing .mainMenu { margin-bottom: 10px; }
Or alternatively, if you want to use <!DOCTYPE html> then fix this .mainArea { margin: 20px 0 20px 0; }, you did not mention any units.
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin,
padding, font-size, border-width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However,
if the value is 0, the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: relative and absolute.
Reference
Related
I want to show a list of tags at the bottom of the screen and if they don't all fit, I want it to wrap so that it's the first line that is the shortest - not the last line.
Once the bottom line is full, I would prefer if the next item added would be what would then appear above instead of below. But if it's easier to make the first item move up that would be ok too.
This example should make it clear:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
This can be achieved by adding flexbox styles to the parent container like so:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
/* flexbox styles */
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
/* margin to separate tags */
margin: 0.1em;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
Try using display:flex, also use flex-wrap:wrap-reverse in order to wrap the elements the way you want.
div {
display: flex;
flex-wrap: wrap-reverse;
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
Using flex property to align like this,
div {
display: flex;
flex-wrap: wrap-reverse; // reverse the wrapping
flex-direction: row-reverse; // reverse the row
}
also add some margin to span
span{
margin:3px;
}
flex-wrap - The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
flex-direction: row-reverse - Work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then row would start on the right, row-reverse on the left.
Result:-
LIVE DEMO
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
margin:3px;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
I'm trying to make tabs with labels that are sometimes two lines. I started out with a ul method, but switched to flexbox hoping to solve two problems: (1) get the tabs to fill the width of the container, and (2) vertically center the labels. Width-filling worked, but centering didn't.
Everybody says justify-content:center and align-items:center will do what I want, but they apparently act only on the boxes themselves, not the text inside them. To horizontally center the text, I can use text-align: center, but there is nothing I can find that will center it vertically. One rumor mentioned align-content:center but that also has no effect. Here is the Codepen I have been playing in: https://codepen.io/OsakaWebbie/pen/mdVrMYK All the lines with /* nope */ are things I tried in vain based on various rumors.
What am I missing? (Sometimes I miss the days when we used tables for layout, in which this would be a piece of cake...)
Add this to your CSS code:
.series-switcher {
display: flex;
}
Or in your case add display: flex; to your .flextabs a.series-switcher class in CSS will work too.
/* basic setup to simulate my environment */
#sidebar { width: 320px; padding: 0 30px; background-color: #eaeaea; }
.widget { clear:both; padding: 10px 0; }
ul { list-style: none; margin: 0; padding: 0;}
a { text-decoration: none; color: #666; }
a:hover { color: #000; }
/* list method */
#series-switcher-ul li {
display: inline-block;
margin: 0;
padding: 0;
vertical-align: middle; /* nope */
}
li a.series-switcher {
display: block;
background-color: #ccc;
border: 1px solid #999;
border-radius: 8px 8px 0 0;
padding: 0 15px;
line-height: 0.8em;
text-align: center;
height: 2.5em;
vertical-align: middle; /* nope */
}
li a.series-switcher.active {
background-color: unset;
color: #000;
border-bottom-width: 0;
}
/* flexbox method */
.flextabs {
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center; /* nope */
justify-content: center; /* nope */
align-content: center; /* nope */
vertical-align: middle; /* nope */
}
.flextabs a.series-switcher {
flex: auto;
background-color: #ccc;
border: 1px solid #999;
border-radius: 8px 8px 0 0;
height: 2.5em;
padding: 0 15px;
line-height: 0.8em;
text-align: center;
align-items: center; /* nope */
justify-content: center; /* nope */
align-content: center; /* nope */
vertical-align: middle; /* nope */
}
.flextabs a.series-switcher.active {
background-color: unset;
color: #000;
border-bottom-width: 0;
}
.series-switcher {
display: flex;
}
<div id="sidebar">
<div class="widget">
<ul id="series-switcher-ul">
<li>New<br>Testament</li><li>Old<br>Testament</li><li>Topics</li>
</ul>
</div>
<div class="widget">
<div class="flextabs">
New<br>Testament
Old<br>Testament
Topics
</div>
</div>
</div>
So I looked at your codepen and it seems to me that you might just need to edit this CSS rule and add the below:
li a.series-switcher {
display: flex;
align-items: center;
}
The other widget would be .flextabs a.series-switcher
Adding display: flex; fixes the issue there as well.
Hope it helps.
I am trying to put the top three blue boxes into side container to the right.
where i can display these 3 blue boxes verticaly , I am missing the reason they are just floating from left to right above my text and not as I desire.
currently stuck , tried to figure out my mistake for 2 hours
i use,flex-direction: column-reverse; method.
code:
<style>
#part1 {
border-bottom: 4px solid #2b8bc6;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
top: -40px;
left: 0px;
position: relative;
text-align:center;
border-radius:5px;
}
/* part box */
.part11 {
width: 101px;
height: 101px;
text-align:center;
}
/* text inside part boxes */
</style>
<title>HowTo lose weight fast and safely</title>
</head>
<body>
<div id="relatedcontainer">
<div class="pc_main_mainrelated">
<!-- MAIN (Center website) -->
<div class="pc_cat_mainrelated">
<div class="pc_catrelated">
<div class="pc_cat_columnrelated">
<div class="pc_cat_contentrelated">
<button
onclick="window.location.href = 'HowTo_computers_cat_Networks_cat_.html';">
<img src="/HowTo/img/related3.jpg" alt="networks_img" style="width:100%">
</button>
<h3>How to Run fast</h3>
</div>
</div>
<div class="pc_cat_columnrelated">
<div class="pc_cat_contentrelated">
<button
onclick="window.location.href = 'HowTo_computers_cat_Networks_cat_.html';">
<img src="/HowTo/img/related1.jpg" alt="networks_img" style="width:100%">
</button>
<h3>How to get abs</h3>
</div>
</div>
<div class="pc_cat_columnrelated">
<div class="pc_cat_contentrelated">
<button
onclick="window.location.href = 'HowTo_computers_cat_Networks_cat_.html';">
<img src="/HowTo/img/related2.jpg" alt="networks_img" style="width:100%">
</button>
<h3>How to get fat fast</h3>
</div>
</div>
</div>
</div>
<!-- END MAIN -->
</div>
</div>
<div class="box11">
<div class="internallinks">Main Categories >> Health Sub Categories >> HowTo lose weight fast and safely </div>
<div class="box22">
<br></br>
<hr class="hr1">
<h1>How to Lose Weight fast and safely</h1>
<hr class="hr1">
<p>You want to drop pounds, now. And you want to do it safely. But how?</p>
<p>First, keep in mind that many experts say it’s best to lose weight gradually. It’s more likely to stay off. If you shed pounds too fast, you’ll lose muscle, bone, and water instead of fat, says the Academy of Nutrition and Dietetics.</p>
<p>The academy’s advice: Aim to lose 1-2 pounds per week, and avoid fad diets or products that make promises that sound too good to be true. It’s best to base your weight loss on changes you can stick with over time.</p>
<p>For faster results, you’ll need to work with a doctor, to make sure that you stay healthy and get the nutrients that you need.
<br /><br />
<br /><br />
</div>
</div>
</body>
</html>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
hr.hr1 {
border-top: 0.5px solid #d8e3f5;
}
ul {
list-style-position: inside;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.9;
background-color: #d8e3f5;
}
.internallinks {
text-align: center;
margin-top: 80px;
color: #767676;
background-color: #d8e3f5;
cursor: default;
}
/* main page + navbar */
#mainboxes {
background: #e9e9e9;
display: flex;
flex-wrap: wrap;
/* align items horizental */
justify-content: center;
/* options for justify-content:
flex-start
flex-end
center
space-between
space-around
space-evenly*/
/* align items vertical must be height */
height: 874px;
align-items: baseline;
/* otions:
flex-start
flex-end
center
baseline
stretch */
align-content: center;
/*align items vertical where extra space */
/* options:
flex-start
flex-end
center
space-between
space-around
stretch*/
/* can also align single item using
align-self: center; or other commands
*/
}
/* logo and navbar buttons */
/* related style */
#pc_main_mainrelated {
box-sizing: border-box;
}
#pc_main_mainrelated .p {
text-align: bottom;
}
#pc_main_mainrelated .body {
background-color: #e9e9e9;
padding: 10px;
font-family: Arial;
}
/* Center website */
.pc_cat_mainrelated {
max-width: 1000px;
margin: auto;
}
#pc_main_mainrelated .h1 {
font-size: 10px;
word-break: break-all;
}
.pc_catrelated {
margin: 8px -16px;
}
/* Add padding BETWEEN each column */
.pc_catrelated,
.pc_catrelated > .pc_cat_columnrelated {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.pc_cat_columnrelated {
float: left;
width: 25%;
}
/* Clear floats after rows */
.pc_catrelated:after {
content: "";
display: table;
clear: both;
}
/* Content */
/* categories border */
.pc_cat_contentrelated {
border-bottom: 4px solid #2b8bc6;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
text-align: center;
font-size: 22px;
padding: 12px;
border-radius: 10px;
height: 250px;
margin-top: 50px;
}
/* image in categories */
.pc_cat_contentrelated img {
width: 180px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: -2px;
}
/* categories text style */
.pc_cat_contentrelated h3 {
color: white;
font-family: "Open Sans", sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
font-size: 20px;
text-indent: 5px;
box-shadow: 0px 1.5px 0px 0px rgba(0, 0, 0, 0.2);
}
#relatedcontainer {
background-color: #d8e3f5;
margin-top: 20px;
flex-direction: column-reverse;
display: flex;
flex-wrap: wrap;
}
.related {
background: #f4f4f4;
border: #ccc solid 1px;
padding: 1rem;
text-align: center;
margin: 0.5rem;
flex-basis: 100px;
}
I fixed it but now got new problem,
i did remove, the float:left , at the {.pc_cat_columnrelated } in CSS
but now the three boxes are above the text, and not right to it.
I have a really weird bug about inheriting in css. p element that is not inside "a" elements block, inheriting "a" element's properties and turning an "a" element strangely.
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
#import url("https://fonts.googleapis.com/css?family=Lato|Roboto");
body {
margin: 0;
}
#navbar {
min-height: 90px;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: flex-end;
align-items: center;
background: #303841;
}
#navbar a {
padding: 0 6vw;
text-decoration: none;
font: bold calc(20px + 1vw) "Lato";
color: #f6c90e;
letter-spacing: 2px;
text-shadow: 0 2px 0 black;
}
.container #welcome-section {
background: #303841;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container #welcome-section header {
font-size: calc(20px + 2vw);
font-weight: bold;
font-family: 'Lato';
color: #f6c90e;
letter-spacing: 4px;
text-shadow: 0 2px 0 black;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container #welcome-section header p {
margin-top: 0;
color: #eeeeee;
}
.container #welcome-section header h1 {
margin-bottom: 10px;
}
.container #projects {
min-height: 100vh;
display: flex;
align-items: baseline;
justify-content: space-evenly;
flex-wrap: wrap;
background: #3a4750;
}
.container #projects h2 {
flex-basis: 100%;
text-align: center;
font-size: calc(20px + 3vw);
font-weight: bold;
font-family: 'Lato';
color: #eeeeee;
text-decoration: underline;
text-shadow: 0 2px 0 black;
}
.container #projects figure {
width: 35vw;
}
.container #projects figure img {
display: block;
max-width: 100%;
border-radius: 2%;
}
.container #projects figure a {
text-decoration: none;
display: block;
}
.container #projects figure figcaption {
text-align: center;
text-shadow: 0 2px 0 black;
font: bold calc(15px + 1vw) "Roboto";
color: #f6c90e;
}
#media (max-width: 768px) {
#navbar {
justify-content: space-between;
}
#projects > * {
flex-basis: 100%;
padding-bottom: 10px;
}
#projects a {
width: 75%;
margin: 0 auto;
}
}
#media (max-width: 768px) and (max-width: 576px) {
#navbar {
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!-- Navigation bar -->
<nav id="navbar">
About
Work
Contact
</nav>
<!-- Main content -->
<main class="container">
<section id="welcome-section">
<header>
<h1>Anıl Emek Türkeli</h1>
<p>Frontend Developer</p>
</header>
</section>
<section id="projects">
<h2>All Works I've Done So Far </h2>
<figure class="project-tile">
<img src="https://cdn1.imggmi.com/uploads/2019/3/12/f3614255ab87606e66bf5d449e194599-full.png"
<figcaption>Sass Technical Documentation Page</figcaption>
</figure>
<figure class="project-tile">
<img src="https://cdn1.imggmi.com/uploads/2019/3/12/99066cf68f33649bc17562c4925c3afa-full.png"
<figcaption>Repedo Landing Page</figcaption>
</figure>
<figure class="project-tile">
<img src="https://cdn1.imggmi.com/uploads/2019/3/12/626217cf51607a559f6a47fad499f355-full.png"
<figcaption>Repedo Survey Form</figcaption>
</figure>
<figure class="project-tile">
<img src="https://cdn1.imggmi.com/uploads/2019/3/12/1dbdcffbefc68964500597ec04e48e05-full.png"
<figcaption>Mustafa Kemal Atatürk's Tribute Page</figcaption>
</figure>
</section>
<section id="contact">
<p>Deneme</p>
</section>
</main>
https://codepen.io/anilemek/pen/PLjpQm
Can anybody explain why this issue occured?
Thank you.
If it is about the <p> with textDeneme at the bottom of the site, the issue is in the img tags before. You have to close them. So eg,<img src="https://cdn1.imggmi.com/uploads/2019/3/12/626217cf51607a559f6a47fad499f355-full.png"/>
I have an aside on the side of my webpage that contains span blocks that contain tags for blog posts. Right now, they're set up with display: inline-table that put multiple on each line and then go to the next line as overflow.
If possible (and JavaScript is okay, but CSS is preferred), how can I get these spans to take up the entire width inside of the div so I don't have the "rough edge" to the right? I'd like to either increase the margins between the span blocks or I'd be okay with increasing the width of the span as well.
Here's the code I currently have:
body {
background-color: #333;
color: #333332;
}
aside {
background-color: white;
width: 300px;
height: 300px;
margin: auto;
}
h2 {
margin: 24px;
padding-top: 24px;
}
.tag-wrapper {
padding: 0px 24px;
}
span {
display: inline-table;
text-transform: uppercase;
background-color: #F77C2F;
margin: 4px 2px;
padding: 8px;
}
<div class="container">
<aside>
<h2>Tags</h2>
<div class="tag-wrapper">
<span>finance</span>
<span>if</span>
<span>pv</span>
<span>pivot tables</span>
<span>vba</span>
<span>test</span>
<span>test</span>
<span>test</span>
</div>
</aside>
</div>
A little flexbox magic will get the job done:
body {
background-color: #333;
color: #333332;
}
aside {
background-color: white;
width: 300px;
height: 300px;
margin: auto;
}
h2 {
margin: 24px;
padding-top: 24px;
}
.tag-wrapper {
padding: 0px 24px;
display: flex;
flex-flow: row wrap;
align-content: stretch;
}
span {
flex: 1 0 auto;
text-transform: uppercase;
background-color: #F77C2F;
margin: 4px 2px;
padding: 8px;
}
<div class="container">
<aside>
<h2>Tags</h2>
<div class="tag-wrapper">
<span>finance</span>
<span>if</span>
<span>pv</span>
<span>pivot tables</span>
<span>vba</span>
<span>test</span>
<span>test</span>
<span>test</span>
</div>
</aside>
</div>
The properties used are:
display: flex: this sets the display type of the container to flex (aka flexbox)
flex-flow: row wrap: makes items order in a row, and wrap as required.
align-content: stretch: makes items stretch to fill the flex direction (row).
flex 1 0 auto: makes the items "growable" (1), but not "shrinkable" (0), and use self base width (auto) before distributing leftover space.
Is this what you are talking about? If so, just change the display of the span to block instead of inline-block.
body {
background-color: #333;
color: #333332;
}
aside {
background-color: white;
width: 300px;
height: 300px;
margin: auto;
}
h2 {
margin: 24px;
padding-top: 24px;
}
.tag-wrapper {
padding: 0px 24px;
}
span {
display: block;
text-transform: uppercase;
background-color: #F77C2F;
margin: 4px 2px;
padding: 8px;
}
<div class="container">
<aside>
<h2>Tags</h2>
<div class="tag-wrapper">
<span>finance</span>
<span>if</span>
<span>pv</span>
<span>pivot tables</span>
<span>vba</span>
<span>test</span>
<span>test</span>
<span>test</span>
</div>
</aside>
</div>