I'd like to put the RED button to the right, like I would do using floats in the past
Fiddle: http://jsfiddle.net/vb61r4uL/
.container {
height: 100%;
width: 100%;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
}
ul, li {
list-style: none;
padding: 0px;
}
#list {
width: 300px;
background: grey;
}
.item {
display: flex;
align-items: center;
justify-content: flex-start;
}
.destory-button {
background:red;
justify-content: flex-end;
}
<div class="container">
<ul id="list">
<li>
<div class="item">
<input type="checkbox">
Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
2nd Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
3rd Title
<button class="destory-button">Destroy</button>
</div>
</li>
</ul>
</div>
How do I make the button align to the right?
Add this style:
.destory-button {
margin-left: auto;
}
Reference: http://www.w3.org/TR/css3-flexbox/#auto-margins
.container {
height: 100%;
width: 100%;
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
}
ul, li {
list-style: none;
padding: 0px;
}
#list {
width: 300px;
background: grey;
}
.item {
display: flex;
align-items: center;
justify-content: flex-start;
}
.destory-button {
background:red;
justify-content: flex-end;
margin-left: auto;
}
<div class="container">
<ul id="list">
<li>
<div class="item">
<input type="checkbox">
Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
2nd Title
<button class="destory-button">Destroy</button>
</div>
</li>
<li>
<div class="item">
<input type="checkbox">
3rd Title
<button class="destory-button">Destroy</button>
</div>
</li>
</ul>
</div>
Related
i have a section, and inside of it an ul with 4 li. In each li a div that are going to be cards. I want to centralize the text inside the div and put it closer to the bottom.
I tried using float: left, and then change the position with margin top and left, but i cannot centralize it.
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
Add these to .cardd2
display: flex;
align-items: center;
justify-content: space-evenly;
take note of them young padawan, you're gonna use it a lot
also add margin-bottom: 1vh; for separation
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-bottom: 1vh;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I think that this is the code that you want.
I assume that you need to have the text inside lis to be centered vertically and want it to be a bit down to the bottom.
.cards2{
text-align: center;
}
.list2{
list-style: none;
}
.list2 li{
display: inline-block;
}
.cardd2{
width: 200px;
height: 300px;
background-color: rgb(107, 255, 240);
display: flex;
align-content: center;
margin: 10px;
justify-content: center;
}
.list2 p{
text-align: center;
display: flex;
margin-top:100%;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Add the following to .cardd2:
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Maybe Like this:-
* {
padding: 0px;
margin: 0px;
}
.list2 {
display: flex;
positition: absloute;
align items: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I cant see my alignment in one line. logo, menu and right menu... Please help to achieve the final output.
body {
background-color: #ffffff;
}
#wrapper {
width: 1200px;
margin-left: auto;
margin-right: auto;
/* background-color: #CDCDCD; */
}
.top-menu {
margin-top: 40px;
/* background-color: #95E659; */
}
header {
/* width: 100%; */
}
.logo {
width: 40px;
height: 40px;
}
.menu {
float: left;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
margin-right: 55px;
text-decoration: none;
color: #303030;
font: 14px lato;
}
.menu ul li:first-child {}
.menu ul li:nth-child(6) {
margin-right: 300px;
}
.search-container {
float: right;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href=""><img src="assets/images/logo.jpg" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
<li>
<img src="assets/images/user.png" alt=""> Login
</li>
<li>
<img src="assets/images/bucket.png" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
</div>
</header>
<hr>
</div>
Use flex box for inline block elements. This will also give you a lot more control over the children elements and their layout.
I altered your HTML a little, adding the center menu buttons in a parent div and separating unordered list into two unordered lists. This way we can use flex to justify their content with space-between placing them on separate ends of the parent elements block.
On the menu display: flex, we also add a flex value for each child element, the logo, the menu buttons parent div between and the login button. By placing these elements into their own parent divs, we can control the width using flex. To center the elements vertically, if our default axis for display flex is set to row, we can use the align-items property. This will align the items in that parent elements border vertically. align-items: center
The logo and login buttons parents both having a flex value of 0, which means they will take up only the space they need to show their content. The middle element, .between having a flex of 1 will mean it will take up the rest of the parent menus width. This will allow us to place a flex display on the UL elements and we can then set them on separate sides of the remaining sections width using justify-content on the UL elements parent element .between.
Snippit best if viewed in full page view as you define the width of your wrapper to 1200px.
body {
background-color: #ffffff;
margin: 0 auto;
}
#wrapper {
width: 1200px;
margin: 0 auto;
background-color: #CDCDCD;
}
.top-menu {
margin-top: 40px;
background-color: #95E659;
}
.logo {
flex: 0;
}
.logo img {
width: 40px;
height: 40px;
}
.search-container {
flex: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 2rem;
}
.between {
display: flex;
justify-content: space-between;
flex: 1;
}
.menu div ul.left {
display: flex;
justify-content: flex-start;
}
.menu div ul.right {
display: flex;
justify-content: flex-end;
}
.menu ul li {
flex: auto;
display: inline;
list-style: none;
padding: 0 1rem;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<header>
<div id="wrapper">
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href="">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="">
</a>
</div>
<div class="between">
<ul class="left">
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
<ul class="right">
<li>
<img src="assets/images/user.png" alt="">Login
</li>
<li>
<img src="assets/images/bucket.png" alt="">Basket
</li>
</ul>
</div>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">search</i></button>
</form>
</div>
</div>
</div>
</div>
</header>
Here's a start with flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
background-color: #ffffff;
}
#wrapper {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.top-menu {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu {
display: flex;
align-items: center;
}
.logo {
width: 40px;
height: 40px;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<img src="https://via.placeholder.com/50" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<img src="https://via.placeholder.com/10" alt=""> Login
</li>
<li>
<img src="https://via.placeholder.com/10" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">s</i></button>
</form>
</div>
</div>
</div>
</header>
I have created a navbar at the top of my page and I want to center some paragraphs right below it. The paragraphs are centered but are down below the page. How do I get them back up to a view visible wihout scrolling down. Essentially, the rowand col div
<div class="container">
<div class="navbar">
<img src="images/logo.png" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col">
<h1>Sparison</h1>
<P>Music Matching With Love ❤️ </P>
</div>
</div>
The CSS i tried is;
.col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 0vh;
}
*{
margin : 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container{
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box ;
}
.navbar{
height: 12%;
display: flex;
align-items: center;
}
nav{
flex: 1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
}
nav ul li a{
text-decoration: none;
color:black;
font-size: 13px;
}
You have height: 100vh; on the .container, thats why the content is forced down. Use something like height: 20vh; on the container like so:
.col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 0vh;
}
*{
margin : 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container{
width: 100%;
height: 20vh;
background-position: center;
background-size: cover;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box ;
}
.navbar{
height: 12%;
display: flex;
align-items: center;
}
nav{
flex: 1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
}
nav ul li a{
text-decoration: none;
color:black;
font-size: 13px;
}
<div class="container">
<div class="navbar">
<img src="images/logo.png" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col">
<h1>Sparison</h1>
<P>Music Matching With Love ❤️ </P>
</div>
</div>
if you use bootstrap for align the praghraph to right you can add justify-content-end to the row
<div class="container">
<div class="navbar">
<img src="images/logo.png" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
<div class="row justify-content-end">
<div class="col">
<h1>Sparison</h1>
<P>Music Matching With Love ❤️ </P>
</div>
</div>
and if tou don't use bootstrap add row this css =>
.row{
display:flex;
justify-content:flex-end;
width:100%;
}
Just use text-align: center;. Unless there is another reason why you wanted to use a flexbox.
.col {
text-align: center;
}
<div class="container">
<div class="navbar">
<img src="images/logo.png" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col">
<h1>Sparison</h1>
<P>Music Matching With Love ❤️ </P>
</div>
</div>
I'm trying out flex on a blog archive page, listing the last 8 entries per page with a sidebar as one of the flex items - 9 items in total. The sidebar shows first in the normal flex order but i'd like it to show third (as sidebars normally do). Trying any order number on the sidebar item doesn't move it about within the list
https://jsfiddle.net/oliver_p/2v3duxy4/2/
html * {
box-sizing: border-box;
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list-item {
display: flex;
padding-right: 20px;
width: 33.33333%;
padding-bottom: 20px;
}
.list-item:first-child {
order: 2;
}
.list-content-blog {
background-color: white;
display: flex;
flex-direction: column;
width: 100%;
}
.list-content-blog .list-content-holder {
flex: 1 0 auto;
padding: 30px;
}
<ul>
<li class="list-item">
<div class="list-content-blog">
<div class="list-image-holder">
<a href="#">
<img class="img-responsive" src="#">
</a>
</div>
<div class="list-content-holder">
<p class="post-meta-date"><i class="far fa-clock"></i> 5 March 2018</p>
<h2 style="">Blog Title</h2>
</div>
</div>
</li>
<li class="list-item">
<div class="list-content-blog">
<div class="list-image-holder">
<a href="#">
<img class="img-responsive" src="#">
</a>
</div>
<div class="list-content-holder">
<p class="post-meta-date"><i class="far fa-clock"></i> 10 March 2018</p>
<h2 style="">Blog Title</h2>
</div>
</div>
</li>
<li class="list-item">
<div class="list-content-blog">
<div class="list-image-holder">
<a href="#">
<img class="img-responsive" src="#">
</a>
</div>
<div class="list-content-holder">
<p class="post-meta-date"><i class="far fa-clock"></i> 15 March 2018</p>
<h2 style="">Blog Title</h2>
</div>
</div>
</li>
</ul>
you added (.list) class in your css but you forget to add class in your html,
exp. <ul class="list">
You tried it with .list that does not exist in your html(class-"list") so try ul
ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
or add class-"list" to ul :
HTML:
<ul class-"list">
CSS:
.list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
You've got:
html * {
box-sizing: border-box;
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list-item {
display: flex;
padding-right: 20px;
width: 33.33333%;
padding-bottom: 20px;
}
.list-item:first-child {
order: 2;
}
<ul>
<li class="list-item">
1
</li>
<li class="list-item">
2
</li>
<li class="list-item">
3
</li>
</ul>
...so you refer to the ul element by class that you have not applied.
Add class to the ul element and it will work:
html * {
box-sizing: border-box;
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list-item {
display: flex;
padding-right: 20px;
width: 33.33333%;
padding-bottom: 20px;
}
.list-item:first-child {
order: 2;
}
<ul class="list">
<li class="list-item">
1
</li>
<li class="list-item">
2
</li>
<li class="list-item">
3
</li>
</ul>
I'm trying to use flexbox within a bootstrap grid to make a thin menu with items vertically centered but it isn't working. I've attempted to use the styles presented in this demo, but apparently i've still got something incorrect.
Markup
<section class="container secondary-header">
<div class="row">
<div class="col-xs-6">
<nav class="secondary-header__nav">
<ul class="secondary-nav__list-items">
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-6"> </div>
</div>
</section>
SCSS
.secondary-header {
height: 60px;
background-color: #2bf;
}
.secondary-nav {
&__list-items {
display: flex;
align-items: center;
justify-content: space-between;
}
&__nav {
height: 60px;
display: flex;
}
&__list-items {
list-style-type: none;
}
&__list-item {
border: 1px solid;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
// height: 60px;
}
&__list-item {
display: inline;
color: #fff;
}
}
The problem is .secondary-nav__list-items is your flex-parent, but it's height doesn't consume the height of .secondary-header which has the blue background, and is where you want the items within .secondary-nav__list-items to be centered.
You could either make sure everything between .secondary-header and .secondary-nav__list-items has height 100%, so that .secondary-nav__list-items will be as tall as .secondary-header, or just move the height/background to .secondary-nav__list-items instead.
.secondary-nav__list-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.secondary-nav__nav {
height: 60px;
display: flex;
}
.secondary-nav__list-items {
list-style-type: none;
height: 60px;
background-color: #2bf;
}
.secondary-nav__list-item {
border: 1px solid;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.secondary-nav__list-item {
display: inline;
color: #fff;
}
<section class="container secondary-header">
<div class="row">
<div class="col-xs-6">
<nav class="secondary-header__nav">
<ul class="secondary-nav__list-items">
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-6"> </div>
</div>
</section>