I have a question related to CSS flex, i'm a web dev but not CSS expert and i need your help on this CSS flex issue.
Here is the plnkr code snippet, you can see what i wanted here: Plunker
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
align-items: center;
}
.flex-item {
background: #e6e6e6;
padding: 10px;
align-self: stretch;
}
I want that:
All flex items should be stretch.
Flex item on the left should be both vertically and horizontally centered of the box.
Flex item on the right should be vertically: center, horizontally: left.
Thanks in advance, appreciate all your helps :)
I have updated your Plunker[1] Plunker. Please review and let me know is this what you need.
I have added flex-container to the orange div, so that the height will be height of the container
Related
I am trying to build out a component in React.
It kinda works. The only issue is that the text next to each boxicon is slightly below what I would want it to be. I've tried doing margin-bottom and padding-bottom to bring them up but it does not seem to be budging. Anything else I can try?
you should give the direct parent that wrap all these spans which is AudioFileListElements the display: flex; flex-direction: row, and to center all children vertically add align-items: center.
so the css for it will be:
.AudioFileListElements {
background: #392F5A;
height: 7%;
width: 90%;
margin: 5%;
border-radius: 25px;
color: #fff;
font-family: 'Poppins';
display: flex;
flex-direction: row;
align-items: center;
}
and I said vertically, because with flex-direction: row the cross-axis will be the vertical, but with flex-direction: column it will horizontal.. see reference
I use flexbox to deal with horizontal and vertical alignment of a text in a div.
I want to use mark tag to highlight searched text in it but the behaviour is not what i expect : the text in the mark tag is detached from the word it belongs to.
Here is the sample code and picture :
<div class="cell">Bouclage de ceinture conducteur et p<mark>ass</mark>agers</div>
.cell {
display: flex;
align-items: center;
justify-content: left;
background-color: #ddd;
width: 15em;
}
Result and expected
I want to keep flex display, do you have any idea how to solve this issue ? Thanks for your advices.
align-items should be 'start' instead of 'left' and add flex-wrap: wrap;
.cell {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: start;
background-color: #ddd;
width: 15em;
}
Stackblitz link for working solution
Here is the stackbliz show the issue:
https://stackblitz.com/edit/angular-addm8z-rng1eb?file=app/checkbox-overview-example.css
Image of the Issue
Expectation
You need to set the width to cb-wrapper.
i.e
.cb-wrapper
{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100px;
margin: auto;
}
Im working on an accordion drop down and using flex box to align everything on the page. However, I am running into an issue where item are being centered vertically, even though I want them to stay on top.
You can see what I mean in this code pen, I'd like the items to stay on top and only push down one side of the dropdown where clicked.
https://codepen.io/maciekmat/pen/QWLqred
.loh-faq-container{
display: flex;
margin: 2em 0 4em;
align-items: flex-start;
align-self: flex-start;
}
.loh-faq-wrap{
margin: auto;
max-width: 45%;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: flex-start;
}
To my understanding, align-items: flex-start; should work, especially when applying to the child flexbox, but I could very well be wrong. Whats going on here?
It seems to be your margin: auto; on .loh-faq-wrap that is doing this.
Change from:
.loh-faq-wrap {
margin: auto;
}
To this:
.loh-faq-wrap {
margin: 0 auto;
}
Auto margins can be used for centering things. So I would recommend reading up on that.
I am trying to resize an image to be the width of its parent div; normally width: 100%; works fine, but when the parent has display: box; the img is not resized. Giving the child image box-flex: 1 has no effect.
<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
<img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>
Maybe you have solved this, but you can use (Providing example for mozilla)
IMAGE {
display: -moz-box;
-moz-box-flex: 1;
}
#cont {
-moz-box-orient: horizontal;
display: -moz-box;
}
Haven't tested the example and in worst case you need to make some tweek, but i'm pretty sure it's correct.
Granted this is an old question, however, it still shows up in searches so wanted to update with an answer:
Currently in Chrome 23 and Firefox Nightly 21.0a1 this layout works to keep the image the size of the parent div and resize (along with keeping it centered).
http://jsfiddle.net/qAErr/
HTML
<section id="holdMe">
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
</div>
</section>
CSS
#holdMe {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
}
#holdMe img {
width: 100%;
}
Browser?
I'm not aware of any browser that supports the flexbox spec without vendor prefixes.
display: -moz-box; and display: -webkit-box; etc.
Actually, I just looked at your code again... if you're using flex on the images, you don't need the width declaration since flex defines width dynamically.
You should also define the width of the parent div.