I've created a relatively simple layout using two DIVs. The idea is that everything is centered within their own DIVs but if there's not enough to fill a row the ones below would center also.
.row {
display: table;
width: 95%;
text-align: center;
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 2.5vh;
margin-bottom: 2.5vh;
}
.item {
width: 16.6%;
float: left;
}
#media only screen and (max-device-width: 500px) {
.item {
width: 33.3%;
float: left;
}
}
<div class="row">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
</div>
</div>
These work fine and are all aligned. The issue comes when there's an odd number of items.
For example:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
Works fine on mobile but...
| 1 | 2 | 3 |
| 4 | 5 | |
doesn't. I'd want something like this...
| 1 | 2 | 3 |
| 4 | 5 |
That means no matter how many items are added within the HTML they'll distribute properly when those rules are broken. Thanks in advance :)
Hopefully this makes sense.
Here you go with a solution using Flexbox
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.item {
display: flex;
width: 20%;
height: 100px;
border: 1px Solid;
justify-content: center;
align-items: center;
margin: 5px;
}
<div class="row">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
jsfiddle
Related
In my page, I need to make something that looks like this, with a center division with images of different widths all center-aligned within the division (the lines won't be visible, that's just to make it easier to explain):
---------------------------------------
| | IMAGE 1 | |
| <stuff> | IMAGE 2 | <stuff> |
| | IMAGE 123 | |
---------------------------------------
There's a parent division for the whole "pseudo-table", and three divisions for each pseudo-column. However, no matter what I try, it seems to always look like this, where the left edge of the images aligns with each other:
---------------------------------------
| | IMAGE 1 | |
| <stuff> | IMAGE 2 | <stuff> |
| | IMAGE 123 | |
---------------------------------------
My HTML looks like this:
<div class="parent">
<div class="leftcol">STUFF HERE</div>
<div class="centercol">
<img="URL HERE"><br>
<img="URL HERE"><br>
<img="URL HERE">
</div>
<div class="rightcol">STUFF HERE</div>
</div>
For my CSS, I have pared it down for the sake of troubleshooting to:
.parent {
display:flex;
justify-content:space-between;
}
.leftcol {
}
.centercol {
justify-items:center;
}
.rightcol {
}
I've also tried align-items:center to the same lack of results. Any ideas?
Add display: flex, align-items: center and flex-direction: column to the center column div:
.parent {
display:flex;
justify-content:space-between;
}
.leftcol {
}
.centercol {
display: flex;
align-items: center;
flex-direction: column;
}
.rightcol {
}
<div class="parent">
<div class="leftcol">STUFF HERE</div>
<div class="centercol">
<img src="https://picsum.photos/100"><br>
<img src="https://picsum.photos/150/100"><br>
<img src="https://picsum.photos/120/100">
</div>
<div class="rightcol">STUFF HERE</div>
</div>
You may also imbricate flex and grid to allow also X,Y centering on each columns : example
.parent {
display:flex;
}
.parent>div {
flex:1;
display:grid;
justify-content:center;
align-items:center;
gap:0.25em;/* optional */
}
/* see what is going on */
div div {
border:solid 1px;
background:linear-gradient(90deg,transparent 50%, rgba(200,100,100,0.1) 50%),linear-gradient(0deg,transparent 50%, rgba(100,0,100,0.1) 50%)
}
<div class="parent">
<div class="leftcol">STUFF HERE</div>
<div class="centercol">
<img src="https://picsum.photos/50"><br>
<img src="https://picsum.photos/50/40"><br>
<img src="https://picsum.photos/60/30">
</div>
<div class="rightcol">STUFF HERE</div>
</div>
I have 4 divs in a some kind of boxes and I would like to hide original div (on hover) with another pair of hidden divs. So at the beginning it would looks like
_______ _______
| Q1 | | Q2 |
|_______| |_______|
_______ _______
| Q3 | | Q4 |
|_______| |_______|
and after hover on Q1 pair of hidden divs would appear and hide Q1, something like:
___ ___ _______
| Y || N | | Q2 |
|___||___| |_______|
_______ _______
| Q3 | | Q4 |
|_______| |_______|
Is it possible to get this behavior using CSS?
My code so far looks like this (there is just changing colors on hovering, every time I add new div it messes up my table:
.table {
display: grid;
grid-template-columns: 100px 100px;
grid-gap: 10px;
background-color: #eee;
color: #232794;
}
.boxes {
background-color: #232794;
color: #fff;
border-radius: 7px;
padding: 33px;
text-align: center;
transition: 0.3s;
}
.boxes:hover {
background-color: #000000;
}
<body>
<div class="table">
<div class="boxes">Q1</div>
<div class="boxes">Q2</div>
<div class="boxes">Q3</div>
<div class="boxes">Q4</div>
</div>
Basically you need to add elements inside your boxes to hide/show. You can either do this with pseudo-elements or by adding something to the DOM. Since I assume you're going to be able to click the "yes/no" actions, you should actually add an element.
.table {
display: grid;
grid-template-columns: 100px 100px;
grid-gap: 10px;
background-color: #eee;
color: #232794;
}
.boxes {
width: 100px;
height: 100px;
background-color: #232794;
color: #fff;
border-radius: 7px;
text-align: center;
transition: 0.3s;
}
.boxes .question, .boxes .answer {
/* center horizontally & vertically */
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.boxes .answer {
/* hide this until hover */
display:none;
}
.boxes:hover {
cursor:pointer;
}
.boxes:hover .question {
/* hide question */
display:none;
}
.boxes:hover .answer {
/* show answer */
display:block;
}
<body>
<div class="table">
<div class="boxes">
<div class="question">Q1</div>
<div class="answer">
<button>Yes</button>
<button>No</button>
</div>
</div>
<div class="boxes">
<div class="question">Q2</div>
<div class="answer">
<button>Yes</button>
<button>No</button>
</div>
</div>
<div class="boxes">
<div class="question">Q3</div>
<div class="answer">
<button>Yes</button>
<button>No</button>
</div>
</div>
<div class="boxes">
<div class="question">Q4</div>
<div class="answer">
<button>Yes</button>
<button>No</button>
</div>
</div>
</div>
I'm trying to set the nested images inside gallery to:
1) Wrap thumbs horizontally, i.e. in this example, one & two on first row and then below them 3 & 4 and so on..
2) Wrap thumbs vertically as well w/ wrapping thumbs moving up to top-rt & filling downward like first column.
3) Prevent thumbs from increasing gallery wrapper height & wrap instead. I tried setting gallerry to fixed height but still thumbs overflow.
<div id="list-wrapper">
<div id="gallery">
<div><img src="images/1.png" alt="one" /></div>
<div><img src="images/2.png" alt="two" /></div>
<div><img src="images/1.png" alt="three" /></div>
<div><img src="images/2.png" alt="four" /></div>
<div><img src="images/1.png" alt="five" /></div>
<div><img src="images/2.png" alt="six" /></div>
</div>
<div id="mainimg"><img src="images/lg.png" alt="large" /></div>
</div>
#list-wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
flex-wrap: wrap;
}
#list-wrapper #gallery {
flex: 1 1 20%;
background-color:red;
width:200px;
}
#list-wrapper #gallery div {
width:100px;
height:100px;
}
#list-wrapper #gallery div img {
width:100px;
height:100px;
}
#list-wrapper #mainimg {
flex: 1 1 80%;
background-color:blue;
}
#list-wrapper #mainimg img {
width:100%;
height:auto;
}
Flexbox Fiddle
Examples matching questions:
1) Horizontal:
2) Vertical:
3) Prevent overflow:
Something like this? https://jsfiddle.net/xwkr3jgL/
You can easily fix size/margin/etc. (have images in the correct ratio and sizes) to make it more pretty, but this is how you can do in like you want =)
Change the proptery flex-direction to row for
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
and to column for:
| 1 | 4 |
| 2 | 5 |
| 3 | 6 |
#list-wrapper {
width: 800px;
display: grid;
grid-template-columns: 20% 80%;
border: 10px solid #000;
}
#gallery {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 420px;
}
#gallery > div {
width: 50%;
}
#gallery img {
max-width: 100%;
}
#mainimg > img {
max-width: 100%;
display: block;
}
<div id="list-wrapper">
<div id="gallery">
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="one" />
</div>
<div>
<img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="two" />
</div>
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="three" />
</div>
<div>
<img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="four" />
</div>
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="five" />
</div>
<div>
<img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="six" />
</div>
<div>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="seven" />
</div>
</div>
<div id="mainimg"><img src="https://shortlist.imgix.net/app/uploads/2015/12/04110243/50-of-the-best-star-wars-quotes-60-852x568.jpg?w=1200&h=1&fit=max&auto=format%2Ccompress" alt="large" /></div>
</div>
I have been struggling with this CSS layout. I have n items that its amount might increase dynamically. And I want to only just have n rows and many or unlimited columns layout.
So, let's say that n is 2 and I have 3 items, This is how my items should look like,
-----------
| 1 || 3 |
-----------
| 2 |
-----------
For the same n, with 6 items,
-----------------
| 1 || 3 || 5 |
-----------------
| 2 || 4 || 6 |
-----------------
And so on..
I have tried tinkering it with float: left with no lucks. And now I am kinda learning flex layout, which leads me to stuck.
Please help :) Here's my Fiddle
Note: All my items will have the same width and height.
Something like this?
jsFiddle 1
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
/* Below this is just styling */
.items {
background-color: #0f9c8a;
padding: 4px;
height: 250px;
width: 100%;
}
.item {
width: 100px;
height: 100px;
background-color: #6f6ac2;
border: 1px solid #fff;
margin: 2px;
text-align: center;
line-height: 100px;
}
<div class="items">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
Update: since you need to align the .item divs to the left just add align-content:flex-start; to the container .items, like this:
jsFiddle 2
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
/* Below this is just styling */
.items {
background-color: #0f9c8a;
padding: 4px;
height: 250px;
width: 1000px;
}
.item {
width: 100px;
height: 100px;
background-color: #6f6ac2;
border: 1px solid #fff;
margin: 2px;
text-align: center;
line-height: 100px;
}
<div class="items">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div>
I'm trying to align a span element in the center of a container div, and have another span with right-aligned text aligned left of it:
+--------------------------------------------------------+
| <div> |
+----------------------+----------+ |
| <span> | <span> | |
| | | |
| | | |
| | | |
| right-aligned | centered | |
| | | |
| | | |
| | | |
| | | |
+----------------------+----------+ |
| |
+--------------------------------------------------------+
The contents of both spans are dynamically generated, so I'd like to avoid any absolute pixel widths if possible.
Any idea how to achieve this type of layout?
Here is the markup I eventually went with based on Persinj's answer:
HTML
<nav class="navbar">
<span class="nav-aside">Right-aligned: </span>
<span class="nav-menu">centered</span>
<span class="nav-aside"></span>
</nav>
CSS
nav.navbar {
display: flex;
}
span.nav-aside {
flex-grow: 1;
flex-basis: 0;
text-align: right;
}
span.nav-menu {
align-self: center;
text-align: center;
}
I left the vendor prefixes out of my markup since I have limited browser requirements, and I'm relying on autoprefixer to take care of that. Please see the accepted answer if you need them.
Flexbox design / layout
This can be sloved using flex:
Setting tree boxes:
Aside, center and a hidden one, will fill the required space.
Setting a flex-grow will make make them take up different parts of the page.
Setting flex-grow: 1; on each will make them take up equal space.
Setting one of them to flex-grow: 0.5; will give this part less space to grow.
Adding a wrapper with the flex property we can use align-items:center to make sure they stay in the center of the wrapper.
Fiddle
.wrapper {
height: 250px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
text-align: center;
}
.center,
.aside,
.not-shown {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.center {
flex-grow: 0.5;
background-color: lightblue;
height: 50px;
}
.aside {
text-align: right;
background-color: 1;
background: lightgreen;
height: 50px;
}
.not-shown {
visibility: hidden;
flex-grow: 1.5;
height: 50px;
}
<div class="wrapper">
<div class="aside">
aside
</div>
<div class="center">
center
</div>
<div class="not-shown">
</div>
</div>
HTML:
<div class="wrapper">
<span class="span-left">right-aligned</span>
<span class="span-center">centered</span>
</div>
CSS:
.span-left, .span-center { display: inline-block; }
.span-left {
width: 40%;
text-align: right;
}
.span-center {
width: 20%;
text-align: center;
}
Alternatively, use display: block and float: left; on your spans (don't forget to clear after the wrapper).