As shown in the image attached, there is a very large gap between each of my elements and I was to reduce that vertical gap. This is my code so far, but I'm not sure what to add to the CSS to fix the issue. Thanks
</div>
<div className="flex-container">
<Email username={username}/>
<Message username={username}/>
<Whatsapp username={username}/>
</div>
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 700px;
display: block; /* Make the buttons appear below each other */
}
current flex layout
Related
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
Here is an image of my side nav. I'd like to have more control over evenly distributing these items in the nav (there is more room on top and bottom than is show in the image).
Image of the side nav elements, with grid and Materialize formatting things correctly.
Here the relevant code (using grid, which is not included here, as well as the "grid" module from Materialize, which gives me some helps for formatting text etc.):
.nav-side-wrapper {
display: flex;
flex-direction: column;
}
.nav-side {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
}
.side-nav-links {
border-bottom: 2px solid;
}
<nav class="valign-wrapper nav-side-wrapper">
<div class="container nav-side">
<ul class="side-nav-links center-align">
<li>Learning Hub</li>
<li>Resources</li>
<li>Glossary</li>
</ul>
<ul class="center-align side-buts">
<li><button class="but-test">Click me!</button></li>
<li><button class="but-test">Click me!</button></li>
<li><button class="but-test">Click me!</button></li>
</ul>
</div>
</nav>
I've tried all combinations, removing the valign-wrapper and center-align helpers from Materialize, moving the flex code (display, flex-direction, justify-content, etc.) around, trying seemingly every combination between which lines go where, between .nav-side-wrapper and .nav-side.
It's really stumping me... Any help would be majorly appreciated.
Ideally, I'd like the links to be spaced along the top half of the nav, and the buttons evenly spaced along the bottom half of the nav.
A solution to this is to set the flex property to 1 on the flex child. When this property is set on a flexible item, it will make all the items the same length. If you add padding to your top and bottom of the flex child as well, you can play around with the perception of the height. The snippet shows the parent flex to be a height of 400px. You can play around with the height to see how it retains the space-around spacing.
.nav-side-wrapper {
height: 400px;
width: 30%;
display: flex;
flex-direction: column;
background-color: pink;
justify-content: space-around;
}
.nav-side {
display: flex;
-webkit-flex: 1;
/* Safari 6.1+ */
-ms-flex: 1;
/* IE 10 */
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 10% 0px;
}
hr {
border: none;
background-color: black;
height: 2px;
width: 90%;
}
<nav class="nav-side-wrapper">
<div class="nav-side">
<div>Learning Hub</div>
<div>Resources</div>
<div>Glossary</div>
</div>
<div>
<hr>
</div>
<div class="nav-side">
<div><button class="but-test">Click me!</button></div>
<div><button class="but-test">Click me!</button></div>
<div><button class="but-test">Click me!</button></div>
</div>
</nav>
try adding this your CSS
.nav-side {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
.side-buts{
display: flex;
justify-content: space-around;
flex-direction: column;
}
I have items of different sizes in the flex container which I want to display in several columns of different widths, depending on the content. flex-flow: column wrap works good for me with fixed container height but I have fixed width for container and want the height depending on the content. I.e. I want as many columns as fit in width.
Example, how it must look:
.container {
height: 80px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column wrap;
align-content: left;
}
.container > span {
margin: 3px 12px;
background: #ebd2b5
}
<div class="container">
<span>Apple</span>
<span>Apricot</span>
<span>Avocado</span>
<span>Banana</span>
<span>Bilberry</span>
<span>Blackberry</span>
<span>Blackcurrant</span>
<span>Blueberry</span>
<span>Boysenberry</span>
<span>Currant</span>
<span>Cherry</span>
<span>Cherimoya</span>
<span>Cloudberry</span>
<span>Coconut</span>
</div>
Any solutions with CSS?
No. With pure css you can't.
However if you use align-content: stretch; You can distribute the current columns to the entire container width.
.container {
height: 80px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: column wrap;
align-content: stretch;
}
.container > span {
margin: 3px 12px;
background: #ebd2b5
}
<div class="container">
<span>Apple</span>
<span>Apricot</span>
<span>Avocado</span>
<span>Banana</span>
<span>Bilberry</span>
<span>Blackberry</span>
<span>Blackcurrant</span>
<span>Blueberry</span>
<span>Boysenberry</span>
<span>Currant</span>
<span>Cherry</span>
<span>Cherimoya</span>
<span>Cloudberry</span>
<span>Coconut</span>
</div>
I'm trying to make something similar to Bootstraps jumbotron class using flexbox. I want everything to be centered vertically and horizontally, but I want anything inside of the box to still respect standard HTML rules. That is, if I make an <h1> and then an <h4> I want them to be on separate lines; however, with my current flexbox properties, that's not happening. See the example below -- it looks like titlesubtitle instead of title\nsubtitle
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div class="Jumbotron">
<h1>title</h1>
<h4>subtitle</h4>
</div>
You can introduce a new, non-flex parent to wrap those elements, so that parent will be the centered flex-child, and it's children will just be normal, non-flex children
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div class="Jumbotron">
<div>
<h1>title</h1>
<h4>subtitle</h4>
</div>
</div>
Or for your example, if you just want the children of the flex parent to be on their own line, use flex-direction: column;
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
<div class="Jumbotron">
<h1>title</h1>
<h4>subtitle</h4>
</div>
I have this HTML that is part of a grid using display: table-cell. The width of the div is wider than the contents:
<div>123</div>
<div><button>1</button></div>
How can I enter the text and the button inside the larger div?
flex-box is the best solution
.container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
background: brown;
}
<div class="container">
<p>Text at center</p>
<button>button</button>
</div>
You can remove align-items: center if you don't want horizontal center and can remove justify-content: center you don't want vertical center
.centeredFlex {
display: flex;
justify-content: center;
align-items: center;
height: 600px; /* whatever you want... */
width: 100%; /* whatever you want... */
}
<div class="centeredFlex">
<button>1</button>
</div>
Have a look at flexbox: http://www.w3schools.com/css/css3_flexbox.asp!