I want to break a unordered list using CSS. What i currently have is this
What i require is this
Scenario after Marcus code
Here is the html
<div class="tab-content">
<div class="tab-content-block">
<div class="home-subheading">'Functional Requirement Documents'</div>
<ul style="list-style: none;">
<li><a href="https://prod.us/System_Functionality/Functional_
Requirement_Documents/Agent_and_Commission">'Agent and Commission'</a></li>
<li><a similar other 21 li</a></li>
</ul>
</div>
Here's the CSS
tab-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
margin-left: 2.2em;
}
.tab-content-block {
padding: 0 1em 1em .5em;
min-width: 25%;
}
.tab-content-block ul li {
margin-bottom:10px;
margin-left:-17px;
}
You can use columns only in the <ul>.
.tab-content-block ul {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
See it working:
https://jsfiddle.net/hrm3tx9j/1/
Change the flex-direction to column and give flex-wrap
tab-content {
display: flex;
flex-direction: column;
height: 500px;
flex-wrap: wrap;
justify-content: left;
margin-left: 2.2em;
}
It will be great if you provide a Demo link of jsFiddle or Plunkr.
Related
I am trying to achieve this (my Figma mockup):
Where as I keep getting this in my real coding (text is dummy):
This is my (S)CSS for the page:
.navbarcont {
margin-top: 2em;
display: flex;
background-color: hsl(206, 97%, 13%);
border-radius: 34px;
width: 80vw;
height: 3em;
margin-left: auto;
margin-right: auto;
.links {
display: flex;
justify-content: flex-start;
margin-left: 2em;
align-items: center;
}
ul {
display: inherit;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.langcont {
display: inherit;
justify-content: flex-end;
align-items: center;
}
}
And this is my React HTML:
<div className="navbarcont">
<div className="links">
<ul> {/*TODO: Remember to put icons before the a tags! (USE BOOTSTRAP ICONS!) */}
<li>
Hello
</li>
<li>
Hello
</li>
<li>
Hello
</li>
</ul>
</div>
<div className="langcont">
<div className="langtext">
<p>Language Select</p>
</div>
</div>
</div>
I really do not know where I am going wrong, or why I cannot use justify-content: flex-end; on the langcont class.
Thanks a lot for your help.
You need an additional justify-content in the navbarcontent-class
.navbarcont {
...
justify-content: space-between;
}
This will add space between the two divs and should display your elements like intended.
You have to use justify-content: space-between property on .navbarcont
.navbarcont {
display: flex;
justify-content: space-between;
...
}
I am trying to have my unordered list (ul class="main-nav-list") of li's move to the next line as the screen decreases by using flex-wrap: wrap. Currently, when I apply it to the li elements, they will move off the screen and not to the next line. I have tried using flex-wrap: wrap in each layer of my code as well as you can see from the commented out section.
My Html is:
<div class="main-image">
<header class="header">
<div class="main-nav">
<ul class="main-nav-list">
<li>Home</li>
<li>About Us</li>
<li>Our Faith</li>
<li>Schedule</li>
<li>Patron Saint</li>
<li>Parish Hall</li>
</ul>
</div>
</header>
</div>
My scss is:
.main-nav {
height: 100%;
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: center;
margin-top: 60px;
&-list{
height: 100%;
display: flex;
flex-wrap: wrap;
flex: 1;
& li {
display: flex;
flex-wrap: wrap;
height: 100%;
color: var(--color-white-1);
font-size: 3rem;
list-style: none;
padding: 4rem;
flex: 1;
}
}
}
I have a layout where I have a small bar (not navbar), then below it, I have 3 divs floating left. How do I make the rightmost one occupy the rest of the width of the page?
Use flex on the parent instead of floating the children, then set the one you want to occupy the rest of the space to use flex-grow: 1
.flex {
display: flex;
}
.pancakes {
flex-grow: 1;
background: #eee;
}
<div class="flex">
<div>1</div>
<div>2</div>
<div class="pancakes">3</div>
</div>
Flexbox is the way to go. Don't forget to use autoprefixer with whatever build tool you use or to add the vendor prefixes by hand.
Markup
<section class="things">
<ul class="thing-list">
<li class="thing">thing one</li>
<li class="thing">thing two</li>
<li class="thing">thing three</li>
</ul>
</section>
Styles
.things {
border: 1px solid red
}
.thing-list {
list-style: none;
margin: 0;
padding: .5rem;
display: flex;
flex-direction: row;
}
.thing-list .thing {
border: 1px solid blue;
padding: .5rem;
text-align: center;
}
.thing-list .thing:last-of-type {
flex-grow: 1;
}
I also suggest you build a jsFiddle next time. As simple as possible to show the scenario: https://jsfiddle.net/sheriffderek/26btxypb/
Gnar
.thing-list {
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.thing-list .thing:last-of-type {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
I'm trying to create this top header using flexbox.
Basically I would like to center the <div class="header-title"> (Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image.
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li>Institutioner</li>
<li>
Ledere
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>
Demo - JSFiddle
Use nested flex containers and flex-grow: 1.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav {
display: flex;
height: 50px; /* optional; just for demo */
background: white;
}
.links {
flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
display: flex;
justify-content: flex-start;
align-items: center;
border: 1px dashed red;
}
.header-title {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed red;
}
.logout {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px dashed red;
}
.links a {
margin: 0 5px;
text-decoration: none;
}
<div class="nav mobilenav">
<div class="links">
Institutioner
Ledere
</div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
jsFiddle
Use justify-content: space-between; like this:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Css grid will do this better than flexbox.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
button {
display: inline-block;
}
.short-content {
margin-left: auto;
}
<div class="grid">
<div class="long-content">
This has content that is fairly long
</div>
<button>CTA Button</button>
<div class="short-content">
Small Text
</div>
</div>
Here is a Flex solution that aligns the right and left containers while centering the middle container correctly.
.header-box {
width: 100%;
display: flex;
flex-flow: row wrap;
padding-top: 50px;
}
.left-header, .center-header, .right-header {
flex: 100px; /* adjust width if needed */
}
.header-box div:nth-of-type(1) {
text-align: left;
}
.header-box div:nth-of-type(2) {
align-self: center;
text-align: center;
}
.header-box div:nth-of-type(3) {
text-align: right;
}
<div class="header-box">
<div class="left-header">Left<br>header<br>content</div>
<div class="center-header">Center<br>header<br>content</div>
<div class="right-header">Right<br>header<br>content</div>
</div>
If you are open to changing your html, you need to put all the items in your header on the same level in the DOM.
Here's a working example
.nav {
background: #e1e1e1;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.nav > div {
min-width: 0;
white-space: nowrap;
}
.header-title {
flex-basis: 80%;
text-align: center;
}
.nav div a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div>Institutioner</div>
<div>Ledere</div>
<div class="header-title">
Institution institution 1
</div>
<div class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</div>
</div>
I'd like to move my <h1> element in flex-start direction, so I used align-self to override the initial direction, but didn't work.
HTML:
<div class="container">
<h1>Logo</h1>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
CSS:
.container {
background: deepskyblue;
display: flex;
justify-content: flex-end;
flex-direction: row;
}
.container h1 {
align-self: flex-start;
}
.navigation {
display: flex;
list-style: none;
}
.navigation a {
color: white;
padding: 1rem;
text-decoration: none;
display: inline-block;
}
.navigation a:hover {
background-color: red;
}
CodePen
If you want the <h1> aligned at start you want to set the justify-content property of its' parent to space-between. You don't need align-self on <h1>:
.container {
background: deepskyblue;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.container h1 {
color: white;
}
Updated pen.