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;
}
Related
I have a flex container that has multiple divs within. I am trying to figure out how to set a hover overlay black overlay with copy that is the same size as the container and overlays the divs within the container. I'm assuming there's a way to do this with HTML & CSS without JS? The idea being that when you hover over one of the boxes on the page, a "READ MORE" notice comes up on a 75% transparent black overlay. I'm just rambling now in order to "add some more details"
.box {
display: flex;
transition: background-color 0.5s ease;
background: white;
width: 23%;
margin: 10px;
color: black;
font-weight: bold;
font-size: .7em;
text-align: center;
justify-content: space-between;
height: 40%;
border-left: .5px solid black;
border-right: .5px solid black;
flex-direction: column;
}
#header-box {
display: flex;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
justify-content: flex-star;
align-content: flex-start;
font-family: 'Big Caslon';
}
#end-matter {
display: flex;
border-top: 10px solid black;
border-bottom: 10px solid black;
border-width: .5px;
width: 100%;
justify-content: space-around;
}
#sign-photo {
display: flex;
justify-content: center;
}
#aries {
display: flex;
width: 50%;
justify-content: center;
}
.sign-copy {
display: flex;
padding-left: 5px;
}
<div class="box">
<div id="header-box">
<h2 class="sign-copy">
Aries
</h2>
</div>
<div id="sign-photo">
<img id="aries" src="CSS/images/aries2.svg">
</div>
<div id="end-matter">
<p>
wtf
</p>
<p>
weird content here
</p>
<p>
time something?
</p>
</div>
</div>
You can use :hover as well as :after on specific css classes.
For example:
.container {
border: 2px solid blue;
display: flex;
}
.eachDiv {
border: 1px solid red;
background-color: gray;
width: 33%;
height: 50px;
}
.eachDiv:hover {
color: purple;
background-color: yellow;
}
.one:hover:after {
content: "this is the first div!!!";
}
.two:hover:after {
content: "el segundo div";
}
.three:hover:after {
content: "three is the best";
}
<div class="container">
<div class="eachDiv one">one</div>
<div class="eachDiv two">two</div>
<div class="eachDiv three">three</div>
</div>
Note: this answer may be a better solution to your question.
I have a small div with fixed width and height, inside i have text, that could be probably wrapped and icon
All i need is to keep icon as close as possible to text, but if text is wrapped it will have extra space inside it
Example at JsFiddle
HTML
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
Css
wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
You can use CSS Grid system:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0em;
height: 50px;
width: 100px;
}
SOLUTION 1:
Well. To answer your question, you can straight ahead apply width to the .title.
.wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
width: 58px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
SOLUTION 2:
But I would suggest that you use float instead of flex model with the below solution
.wrapper {
height: 50px;
font-size: 0px;
}
.title {
border: 1px solid green;
height: 50px;
line-height: 50px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
.title, .icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<style type="text/css">
.wrapper
{
}
.title {
border: 1px solid green;
display: inline-block;
max-width: 60px;
vertical-align: middle;
}
.icon
{
border: 1px solid red;
width: 8px;
height: 8px;
display: inline-block;
}
</style>
I have a flexbox 'table' where I'm basically trying to put an interesting thing on the top. The problem I've encountered is being unable to write it in HTML
My current result
The result I'm trying to get
I have tried to do it without inner divs and spans, by doing margin:auto but unfortunately it relocates borders from the left and right to the middle :( So the code for the current result is:
.flex-container {
width: auto;
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-container .middle {
flex: 1;
display: flex;
}
.top {
padding-top: 30px;
border: 2px solid #05788D;
display:flex;
}
.leftSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
}
.rightSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
border-left-style: none;
}
.firstOption
{
border: 2px solid #05788D;
border-top-style: none;
border-bottom-style:none;
}
.anotherOption
{
border: 2px solid #05788D;
border-top-style: none;
border-bottom-style:none;
border-left-style:none;
}
<div class="flex-container">
<div class="top">
<div style="width:50%;">
<span class="firstOption">One option</span>
</div>
<div style="width:50%;">
<span class="anotherOption">Another option</span>
</div>
</div>
<div class="middle">
<div class="leftSide">
left
</div>
<div class="rightSide">
right
</div>
</div>
</div>
Simply use text-align to control text-alignment of your span and use padding inside your span and don't forget to make them inline-block:
.flex-container {
width: auto;
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-container .middle {
flex: 1;
display: flex;
}
.top {
border: 2px solid #05788D;
display: flex;
}
.top div {
flex:1;
}
.leftSide {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
}
.rightSide{
display: flex;
flex-wrap: wrap;
flex-basis: 50%;
overflow: auto;
border: 2px solid #05788D;
border-left-style: none;
}
.firstOption {
text-align:right;
}
.firstOption span,.anotherOption span{
border: 2px solid #05788D;
padding-top: 30px;
display:inline-block;
}
<div class="flex-container">
<div class="top">
<div class="firstOption"><span>One option</span></div>
<div class="anotherOption"><span>Another option</span></div>
</div>
<div class="middle">
<div class="leftSide">
left
</div>
<div class="rightSide">
right
</div>
</div>
</div>
You've added padding-top: 30px to class="top". Instead, the inner child (which are 50%) should have padding-top:30px;
While of course this can be done in a better way, above is the quickest solution to your problem.
You could use justify-content: flex-end on the left option to make it position at the end of the div. I applied the suggested changes to your code in this fiddle.
I can really recommend this guide!
I want to center two divs with display: inline-flex; inside a block container, but somehow align-items: center; and justify-content: center; doesn't work. Only text-align: center; works, but it shouldn't be like that (because I've read that with display: inline-flex; it should be align-items and justify-content) I guess? If my solution is correct, then can you tell me what's the difference?
Also, I want to get rid of that little gap between these two centered divs, but I've tried some solutions from the internet and none of them works. Why?
I'd be glad if you guys could help me out with both of my questions.
Here's the code example:
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
text-align: center;
}
.child, .child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>
It will work if you use display: flex on container element. align-items and justify-content position flex items inside flex-container so you need to set display: flex on parent element.
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.child,
.child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>
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>