I have an ul container and li menu items. Container is 100% width and li items are 50% width of the parent element. Parent is set to display flex and flex direction is column. Now the items are half the width of the flex parents but when I set the child items to flex-grow: 1 nothing seems to be happening at all.
menu-secondary-container ul {
display: flex;
flex-direction: column;
}
#menu-secondary li {
box-sizing: border-box;
font-size: 13px;
border: 1px solid white;
line-height: 2.3;
width: 50% !important;
padding: 0;
flex-grow: 1;
}
I want two items to be in one row and total of two rows.
As I commented above you need to fix your code like this in order to have 2 items per row:
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
box-sizing: border-box;
font-size: 13px;
border: 1px solid #000;
line-height: 2.3;
flex: 0 1 50%; /* Or flex-basis:50% Or width:50% */
padding: 0;
}
<ul>
<li>aaaa</li>
<li>bbb</li>
<li>cccc</li>
<li>ddd</li>
</ul>
Related
I have a flexbox navbar using ul with a height of 86px. I centered
the li-s using align-items: center, but when I want to add a
background-color hover effect on the list items, having the same
the height as the ul, the list items just jump to the top of the ul and
it's no more centered...Why's that? I applied display flex on the
li-s using align-items center and this way was okay, but I know this isn't the right way to do it, because you need to apply flex on
parent elements...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
height: 86px;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
Just remove height from both the element if you want li to take full width of the navbar and adjust its width as per the padding. This is the normal and I guess a good approach to do this.
Your code was just adding height hence text inside it went up. Remove it and add some padding to li
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
padding: 20px 20px;
}
ul li:hover {
background: tomato;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
If I'm understanding the question correctly, I think you need to remove the height set for both the ul and li elements and add appropriate padding to the ul element, so this would be the entire css:
* {
margin: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
padding: 43px 0;
}
I ran this locally and got a vertically and horizontally centered chunk of li items.
You Set height:86px to your li elements and that is causing the problem
you can increase their height using padding-top and padding-bottom or not to add any height to li elements and just let the align-items to work
IF
li heights is a must you can set line-height to them as well
li{
height:86px;
line-height: 86px;
}
here in this fiddle I've just removed li heights and it's working
When aligning li flex items on the y-axis I would use display: flex; on both the ul and li. Then just simply add height: 100%; to your li's for the background-color to cover the full height and you are good to go.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
}
ul,
li {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
li {
height: 100%;
}
li:hover {
background-color: pink;
}
li:nth-child(2):hover {
background-color: lightgreen;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
I would like to have an element that grow and reduce to the dimension of its content only with css rules.
Here an example:
ul {
list-style: none;
padding: 1rem 1rem 1rem 0;
background-color: lightblue;
max-height: 300px;
display: inline-flex;
flex-flow: column wrap;
align-items: flex-start;
width: 238px;
}
ul li {
width: 100px;
border: 1px solid red;
margin-left: 1rem;
}
/* HTML */
<ul>
<li>item</li> // repeated n times
</ul>
https://codepen.io/mt_dt/pen/GRJYaNj?editors=1100
It should be something like that:
https://ibb.co/6wmYkGX
If you want to have each element on the list to be as wider as the ul element, you need to remove hardcoded height and flex properties (they have no use) from the ul element and set width: 100%; on the lis:
ul {
list-style: none;
padding: 1rem 1rem 1rem 0;
background-color: lightblue;
width: 235px;
}
ul li {
width: 100%;
border: 1px solid red;
margin-left: 1rem;
}
Have a look to this codepen. Hope it helps!
I have a simple Flexbox footer. When the screen gets below 580px, the layout changes as you can see below.
I have two primary issues:
The justify-content property on the <ul> doesn't seem to kick in. If I've made the <ul> a display: flex item, surely the child elements should be flex items, no? On the mobile version of the footer, the <li> items stay stuck to the right-hand side.
Why is the right-hand side container (that switches to being the bottom item on the mobile view) so much bigger in height than its sibling at the mobile size? There is no extra padding or height value added to this item.
** Note - I've put a 1px border around every element to make it easier to see what is going on.
* {
border: 1px solid black;
}
body {
margin: 0;
padding: 0;
}
footer {
width: 100%;
display: flex;
justify-content: space-between;
background: red;
box-sizing: border-box;
padding: 1rem;
}
.footer-inner {
background: blue;
width: 30%;
display: flex;
align-items: center;
padding: 1rem;
color: white;
}
#footerright {
display: flex;
justify-content: flex-end;
}
#footerright ul {
display: flex;
list-style-type: none;
justify-content: flex-end;
}
#footerright ul li {
padding: 0px 10px;
color: white;
}
#media screen and (max-width: 580px) {
footer {
flex-direction: column;
align-items: center;
}
.footer-inner {
justify-content: center;
min-width: 240px;
}
#footerright {
justify-content: center;
}
#footerright ul {
justify-content: center;
}
}
<footer>
<div class="footer-inner" id="footerleft">©<span id="footer-year">Year</span> The Company</div>
<div class="footer-inner" id="footerright">
<ul>
<li id="facebook">Twi</li>
<li id="instagram">Fac</li>
<li id="twitter">Ins</li>
</ul>
</div>
</footer>
View on CodePen
Why is the righthand side container so much bigger in height than its
sibling at the mobile size?.
Because when in non-mobile size, the default value of flex row items's align-items kicks in, which is stretch, and make items on the same row equally high, which is not the case when wrapped, or using flex column direction, where they instead collapse to their own height, based on margin, border, padding and content.
In this case, if you remove the preset padding/margin from the ul, it will collapse to the li's size, where they appear to have an equal height, though based on e.g. different font size, etc., they might become unequal again.
Flexbox “Justify Content” not working
The margin/padding reset (ul {margin: 0; padding: 0;}) will also take care of the small left offset the ul suffer from, in both mobile and non-mobile view, though in mobile view it is more obvious, which I also guess is what you meant with justify-content doesn't seem to kick in.
Concerning the "right-alignment" in mobile view: Add padding-left: 0; to the ul to avoid the default padding of uls which causes a horizontal offset from the centered position.
And concerning the size of the second container: Add padding: 0 to .footer-inner and margin: 0 to #footerright ul to reset the default paddings and margins:
https://codepen.io/anon/pen/GOQwBV
You can solve your problem by adding the basic CSS browser reset (equal height problem) and replacing the justify-content: center property inside the #footerright > ul to align-items: center
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid black;
}
html, body {
width: 100%;
}
footer {
width: 100%;
display: flex;
justify-content: space-between;
background: red;
box-sizing: border-box;
padding: 1rem;
}
.footer-inner {
background: blue;
width: 30%;
display: flex;
align-items: center;
padding: 1rem;
color: white;
}
#footerright {
display: flex;
justify-content: flex-end;
}
#footerright ul {
display: flex;
list-style-type: none;
justify-content: flex-end;
}
#footerright ul li {
padding: 0px 10px;
color: white;
}
#media screen and (max-width: 580px) {
footer {
flex-direction: column;
align-items: center;
}
.footer-inner {
justify-content: center;
min-width: 240px;
}
#footerright {
justify-content: center;
}
#footerright > ul {
/*justify-content: center;*/
align-items: center; /* because of the changed direction this is now horizontal alignment / centering */
}
}
<footer>
<div class="footer-inner" id="footerleft">©<span id="footer-year">Year</span> The Company</div>
<div class="footer-inner" id="footerright">
<ul>
<li id="facebook">Twi</li>
<li id="instagram">Fac</li>
<li id="twitter">Ins</li>
</ul>
</div>
</footer>
Certain browsers have default "User Agent Stylesheets", that are the default styles applied to elements on the page. In Webkit, the browser adds a few properties to your ul that are affecting your styles:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-padding-start: 40px;
As you can see, there are margins being added before and after your ul, causing the mobile issue you described, where the ul is taller than its sibling. There is also padding, which is shifting your contents to the right.
To reset these styles, you just need to set those defaults to zero like so:
#footerright ul {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 0;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
Note: you don't need to reset the -webkit- rules above, you'd also be fine just resetting the padding-left, margin-top, and margin-bottom.
How do I make this ul take up the whole width on the web page, no matter what width the window is?
http://jsfiddle.net/32hp1w5p/
ul {
grid-column: 1/13;
list-style-type: none;
display: table;
margin: 0 auto;
}
li {
float: left;
border: 1px solid red;
}
li a {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
color: black;
text-align: center;
padding: 14px 14px;
text-decoration: none;
display: inline-block;
}
<ul>
<li><a>ONE</a></li>
<li><a>TWO</a></li>
<li><a>THREE</a></li>
</ul>
In this jsfiddle there is three li. I'd like every li in this case take up 33% of the total width, and together they fill out the whole width of the web browser window
you made a typo and added margin (makes element shrinks and centers) aside wrong display choices:
That's a lot mistakes and wrong approach ... welcome to the fun of CSS, added a few comments.
body {
/* added the parent grid CSS system */
display: grid;
grid-template-columns: repeat(13, 1fr);
}
ul {
grid-column: 1 / span 13;
/* span is: the typo / missing */
list-style-type: none;
display: flex;
/* lets make it a flexbox,
a grid will do too ,
so would a table at width:100%
if table-layout is set to fixed
and li displayed as table-cell */
margin: 0;/* none or 0, but not auto */
padding: 0;/* might be usefull here ;) */
}
li {
flex: 1;
/* share evenly avalaible space */
border: 1px solid red;
}
li a {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
color: black;
text-align: center;
padding: 14px 14px;
text-decoration: none;
display: /*inline-*/block;/* to fill parent's width */
}
<ul>
<li><a>ONE</a></li>
<li><a>TWO</a></li>
<li><a>THREE</a></li>
</ul>
You can use width: 100vw for your ul, that means, that the element with this rule should take the width of the screen. If you also want to exclude the width of margins or other elements, you can use something like this: width: calc(100vw - widthToExclude);.
Here is a live example (I use calc(33.3vw - 2px);, because lis also have border-left: 1px and border-right: 1px):
body {
margin: 0;
}
ul {
list-style-type: none;
display: table;
margin: 0;
padding: 0;
}
li {
float: left;
border: 1px solid red;
width: calc(33.3vw - 2px);
}
li a {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
color: black;
text-align: center;
padding: 14px 14px;
text-decoration: none;
display: inline-block;
}
<ul>
<li><a>ONE</a></li>
<li><a>TWO</a></li>
<li><a>THREE</a></li>
</ul>
For the following the anchor text isn't centered. If I change the anchor's display from flex to block then the text is centered. Why is this?
Ive only tested on Chrome so far.
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit- box-sizing: border-box; box-sizing: border-box;
}
ul {
display: flex;
flex-flow: row wrap;
padding: 0;
width: 40%;
margin: auto;
border: 1px solid gold;
}
li {
list-style-type: none;
}
a {
background: grey;
width: 200px;
border: 1px solid red;
text-align: center;
display: flex;
}
http://codepen.io/anon/pen/dgmbH
Note: Before you go ahead to read my answer, I would like you to
notify that am not using any of the PROPRIETARY PREFIXES, if it
doesn't work for you, its time to update your browser, or try adding
the prefixes like -moz or -webkit and see if it works for you.
The correct way to do is to use display: flex; for the ul element and flex-grow on li elements...
ul {
display: flex;
padding: 0;
width: 40%;
margin: auto;
border: 1px solid gold;
}
li {
list-style-type: none;
flex-grow: 1;
}
Demo
You are using a fixed width on a tag i.e width: 200px; and that kills the idea of flex layout, so take that out, and alter your CSS with the one provided by me.
Here, I've used flex-grow with a value of 1 so that each of the li element shares the equal amount of width
If you are looking to wrap the cells if they exceed the containers width, than you need to use the following properties on ul element like
ul {
display: flex;
padding: 0;
width: 40%;
margin: auto;
border: 1px solid gold;
flex-direction: row;
flex-flow: row wrap;
}
Demo (Resize your window to see the effect)
Sample 1, the wrapped element will stretch to full width
Sample 2, Elements wrapped equally further
Also note that am using min-width: 100px; on li elements to force wrap in the demonstration
As you commented that you wanted three li on each row, than instead of using flex-grow: 1; you need to use flex: 1 1 33%; like
li {
list-style-type: none;
flex-grow: 1;
min-width: 100px;
flex: 1 1 33.33%;
}
Demo
Sample 3, Equal number of li on each row
Sample 4, Equal number of li on each row even when resized
On further resize, they will accommodate automatically say two in a row and one in a row..