I'm trying to use flex layout in simple image gallery (wip) http://codepen.io/anon/pen/vmhLe.
<html>
<head>
<style>
.thumbPanel {
display: flex;
align-items: center;
border: 2px solid MidnightBlue;
background-color: Gray;
}
.thumbAdminMenu {
display: flex;
flex-direction: column;
align-items: stretch;
}
.thumbAdminButton {
display: inline-block;
margin: 0px;
margin-left: 5px;
flex-shrink: 0;
flex-grow: 0;
border: 2px solid MidnightBlue;
font-size: 20pt;
}
.thumbList {
display: flex;
align-items: center;
margin: 5px;
overflow: auto;
width: 100%;
border: 2px solid MidnightBlue;
background-color: Gainsboro;
}
.thumbArea {
min-width: 200px;
min-height: 200px;
margin: 5px 0px 5px 5px;
background-color: LightGoldenRodYellow;
border: 1px solid MidnightBlue;
}
.thumbArea:first-child, {
margin-left: 0px;
}
.thumbArea:last-child {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="thumbPanel">
<div class="thumbAdminMenu">
<button class="thumbAdminButton">AddXXX</button>
</div>
<div class="thumbList">
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
</div>
</div>
</body>
</html>
The result (browser window shrinked):
http://i.imgur.com/znMcrS2.png
Why is the text AddXXX cropped?
Why is the right margin of right most yellow div missing? I'm setting it with .thumbArea:last-child rule.
Here's the playground: http://codepen.io/anon/pen/vmhLe. There's an issue on codepen and jsfiddle with bottom horizontal scrollbar overflowing (at least for me in Chrome). But when viewing HTML file it displays fine. Also if you open developer console in Chrome it will display fine too.
Thank you.
I can't reproduce the cropped text issue neither on Firefox nor Chromium.
You can fix the margin issue adding an ::after pseudo-element for the wrapper:
.thumbList:after {
content: ''; /* Enabling the pseudo-element */
min-width: 5px; /* Fake margin */
height: 1px; /* Anything but 0 */
}
.thumbPanel {
display: flex;
align-items: center;
border: 2px solid MidnightBlue;
background-color: Gray;
}
.thumbAdminMenu {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: stretch;
}
.thumbAdminButton {
display: inline-block;
margin: 0px;
margin-left: 5px;
flex-shrink: 0;
border: 2px solid MidnightBlue;
font-size: 20pt;
}
.thumbList {
display: flex;
align-items: center;
margin: 5px;
overflow: auto;
border: 2px solid MidnightBlue;
background-color: Gainsboro;
}
.thumbArea {
min-width: 200px;
min-height: 200px;
margin: 5px 0px 5px 5px;
background-color: LightGoldenRodYellow;
border: 1px solid MidnightBlue;
}
.thumbList:after {
content: '';
min-width: 5px;
height: 1px;
}
<div class="thumbPanel">
<div class="thumbAdminMenu">
<button class="thumbAdminButton">AddXXX</button>
</div>
<div class="thumbList">
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
<div class="thumbArea"></div>
</div>
</div>
Related
here is how my screen should look like:
the orange button should be on the right of the "dashboard-detail-body" and have margins to the top, left, and bottom ("dashboard-container")
this is what I tried:
<div class="dashboard-detail-body">
<div style="float: right; margin-right: 10px; margin-top: 15px;">
{{ui-5/button label="click me"}}
</div>
<div class="dashboard-container">
but I do not get the desired behavior - no margin bottom (the orange button is overlapping with the bottom div)
margin-bottom, did not solve it, how can I get the desired behavior?
The issue is with the float: right; style. This makes the element overlap.
You can solve this issue by using flex-box, with the following code:
.dashboard-detail-body{
display: flex;
flex-direction:column;
}
.align-right{
align-self: flex-end;
}
<div class="dashboard-detail-body">
<div class="align-right">
I am right
</div>
<div class="dashboard-container">
<p>a<p>
<p>b<p>
<p>c<p>
</div>
</div>
Though it was difficult to understand and recreate your problem from the available data, I assume that you want to align a button center-right inside the container. You can use flexbox to align elements inside a parent.
.container {
height: 200px;
border: solid 1px #333;
display: flex;
justify-content: right;
align-items: center;
}
button.orange {
border: none;
outline: none;
height: 1.5rem;
/* optional basic styling */
background: orange;
color: #fff;
}
<div class="container">
<button class="orange">Click Me</button>
</div>
You can try with css grid:
.dashboard-detail-body{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
border: 1px solid grey;
border-radius: 2em;
}
.right{
justify-self: end;
margin: 1em 3em 1em 1em;
background-color: orange;
padding: .5em;
border-radius: .5em;
}
.dashboard-container {
display: flex;
justify-content: center;
align-items: start;
border: 1px dashed grey;
border-radius: 1.5em;
margin-bottom: 2em;
width: 95%;
height: 200px;
}
.dashboard-container > p {
padding: 1.5em 2em;
margin: 1em;
border: 1px solid grey;
border-radius: .5em;
}
<div class="dashboard-detail-body">
<div class="right">
click me
</div>
<div class="dashboard-container">
<p></p>
<p></p>
<p></p>
</div>
</div>
As you are shrinking your div with float right it frees space on the left. The clear property doesn't work.
So the solution I came up with is to keep the div full & use a button
.dashboard-detail-body {
background: #eeeeee;
border: 3px solid #bbbbbb;
border-radius: 20px;
height: 80vh;
width: 80%;
min-height: 40rem;
min-width: 45rem;
margin: auto;
}
.btn-area {
height: 5rem;
width: 100%;
/* border: 1px solid red; */
}
.btn {
background: #ff9900;
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #9c7842;
/* clear: left; */
/* display: inline-block; */
float: right;
margin-right: 25px;
margin-top: 25px;
}
.dashboard-container {
border: 3px solid #bbbbbb;
margin: auto;
width: 75%;
height: 75%;
border-radius: 20px;
display: flex;
justify-content: center;
/* align-items: center; */
}
.box {
border: 3px solid #bbbbbb;
width: 6.5rem;
height: 6.5rem;
border-radius: 20px;
float: left;
margin: 1rem;
}
<div class="dashboard-detail-body">
<div class="btn-area">
<button class="btn">Click Me</button>
</div>
<div class="dashboard-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I need a card list layout for this I use flex. in large device everything is ok but when device becomes small and two cards can't be next to each other and go to the next line, my content it's not center
in other words, I need to center my content in all device size and when two cards come together should be space-between and center
.container-card {
background-color: grey;
direction: rtl;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
max-width: 1004px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
Please check the example above in full-page and change the responsive size
Hope this is helpful for you all in center align and i`m not use any mediaquery same code work on small screens .
.container-card {
background-color: grey;
}
.container-holder {
background-color: #ffd700;
width: calc(100% - 28px);
max-width: 1004px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
text-align: center;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
Use CSS grid for this:
.container-card {
background-color: grey;
direction: rtl;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
max-width: 1004px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(481px, 1fr));
place-items: center;
grid-column-gap: 30px;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin: 15px 0;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
to set the cards netx to each other in small devices you can use this media query:
#media(max-width: 400px){
.container-holder {
justify-content: space-around;
}
.request-box {
width: 45%;
}
}
test it . it works nicely!
I have few problems to fix, that are
1- Why logo class properties not working ?
2- Why class title does not move to right, ie justify-content: flex-end not working OR which other way this can be done ?
3- Do I have to write display: flex; in all parent classes or simply container, which has all of them inside is enough ?
4- How it effect if I use display: flex; on all parent classes ?
Many Thanks
---HTML---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width=device-width", initial-scale = 1.0>
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="port.css">
</head>
<body>
<div class="container">
<div class="header">
<div id="logo"> Logo </div>
<div class="title">JAMES O BRAIN
<div class="sub-title">FRONT-END MONK</div> </div>
</div>
<div class="container2">
<div class="centre-picture">Central Pic</div>
<div class="left-boxs">
<div class="blue-box">Blue Box</div>
<div class="grey-box">Grey Box</div>
<div class="green-box">Green Box</div>
</div>
</div>
<div class="bottom-boxs">
<div class="featured-work">Featured Work</div>
<div class="appify">APPIFY</div>
<div class="sunflower">SUNFLOWER</div>
<div class="bokeh">BOKEH</div>
</div>
</div>
</body>
</html>
---CSS---
.container {
display: flex;
flex-direction: column;
border: 5px solid black;
margin: 10px;
padding: 50px;
}
.header {
display: flex;
border: 5px solid green;
}
.logo {
/* why these all properties not working at all ? */
border: 3px solid black;
padding: 10px;
margin: 10px;
}
.title {
border: 3px solid orange;
justify-content: flex-end; /* why this property not working, how can i get this to right ?*/
padding: 10px;
margin: 10px;
}
.sub-title {
border: 3px solid black;
padding: 5px;
margin: 5px
}
.container2 {
display: flex;
border: 5px solid red;
margin: 10px;
padding: 10px;
height: 300px;
}
.centre-picture {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.left-boxs {
border: 3px solid goldenrod;
margin: 10px;
padding: 10px;
order: -1;
}
.green-box {
background-color: green;
padding: 5px;
margin: 5px
}
.blue-box {
background-color: blue;
padding: 5px;
margin: 5px
}
.grey-box {
background-color: grey;
padding: 5px;
margin: 5px
}
.bottom-boxs {
display: flex;
border: 5px solid blue;
}
.appify {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.sunflower {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.bokeh {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
As Daniel stated, you should make sure that you are not confusing #id and .class selectors in your markup/CSS. In your stylesheet you should be using #logo instead of .logo.
There are several ways you can align the items in your header. In the example below I attached justify-content: space-between; to the .header div which will align any direct child elements with an even amount of left over space between them. There are other ways you can do this...this is just one option. You can play around with margins, padding, and other flexbox values to see what works best for you.
Giving a container display: flex will have effect on all of the children elements inside the container, but not the contents inside each of those children. For example: If you have a container with three div elements inside it, and you give the container display: flex; justify-content: center; this will center each div horizontally, but not the text, images, etc, inside each div. In your case, at least in this example, yes, you need to add display: flex; to each of the divs inside the header in order to apply flexbox properties to the text inside.
Hope that helps a little. See the snippet below for one example. Good luck!
.container {
display: flex;
flex-direction: column;
border: 5px solid black;
width: 80%;
padding: 50px;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: 5px solid green;
padding: 10px;
}
#logo {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid black;
padding: 10px;
}
.title {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid orange;
padding-left: 10px;
}
.sub-title {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
padding: 10px;
border: 3px solid black
}
<div class="container">
<div class="header">
<div id="logo">Logo</div>
<div class="title">JAMES O BRAIN
<div class="sub-title">
FRONT-END MONK
</div>
</div>
</div>
</div>
It's because in your HTML you are using an id, #, but your CSS is targeting a class .. Change your CSS to this instead:
#logo {
/* why these all properties not working at all ? */
border: 3px solid black;
padding: 10px;
margin: 10px;
}
If you have multiple containers with 1px border, all containers next to each other generate a 2px border. So in order to get rid of that you always set e.g. border-right: none; and then add border-right: 1px; to the last child to make all containers have 1px border in all sides.
But if you use flexbox flex-basis rule to break containers into next line, it breaks whole border-right idea, the last container in the line before the break always stays left out with no border.
e.g. in this example I have 5 containers, but I want 4 per line and when it breaks into new line, you can see the border-right issue:
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child {
border-right: 1px solid #000;
}
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>
https://jsfiddle.net/45kngj9p/
Since you know how many flex items there are in each row, you can use the :nth-child() selector to apply borders to items missed by the main rule.
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
margin-bottom: 1px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:nth-child(4n + 1) { /* add border to first child in each row */
border-left: 1px solid red;
}
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
<div class="container">6</div>
<div class="container">7</div>
<div class="container">8</div>
<div class="container">9</div>
<div class="container">10</div>
</div>
Remove Border:none; and add margin-left:-1px;
.container {
flex-basis: 20%;
border: 1px solid #000;
margin-left:-1px;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
That's it!
You can try these solutions:
1
Here you don't need the .container:last-child styles.
.container {
flex-basis: 20%;
border: 1px solid #000;
margin-bottom: 1px;
margin-right: -1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
2
This one works for boxes number 4, 8, 12, etc.
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child,
.container:nth-child(4n) {
border-right: 1px solid #000;
}
I try to align three div on the same row but div only display one by row, as if I was using column. Any idea on what's my error ?
Do not hesitate to tell me if you think the error could come somehow from the 'header.php' which is the only other part of my work so far. I'll post HTML and CSS of it here if asked to.
body {
background-color: #F1F1F1;
font-family: 'robotolight';
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}
.container {
padding: 0;
margin: 0;
background-color: #ffffff;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-flow: row nowrap;
-webkit-flex-flow: row wrap;
jusitify-content: space-around;
}
.mydiv {
background-color: #ffffff;
-moz-box-shadow: 1px 1px 1px 0px #999999;
-webkit-box-shadow: 1px 1px 1px 0px #999999;
-o-box-shadow: 1px 1px 1px 0px #999999;
box-shadow: 1px 1px 1px 0px #999999;
width: 30%;
height: 30%;
}
<div id="container">
<div class="mydiv">
first div left
</div>
<div class="mydiv">
second div center
</div>
<div class="mydiv">
third div right
</div>
</div>
You havn't a .container element, you have a #container element.
It's justify-content and not jusitify-content.
Example:
.container {
align-items: center;
border: 3px solid #CCC;
border-radius: 5px;
display: flex;
justify-content: space-around;
padding: .5rem;
width: 210px;
}
.box {
background-color: #ddd;
height: 60px;
line-height: 60px;
text-align: center;
width: 60px;
}
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>