flexbox

问题 I'm trying to center vertically the content with flex boxes without success. I don't like to use position or translate because it is not a fixed size. What is wrong with my code? .row-centered { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .col-centered { display: flex; flex-direction: column; align-self: flex-start; float: none; margin-right: 0 auto; } .us-container{ display: flex; justify-content: center; align-items: center; vertical-align: middle; resize

问题 I have a flex item that is also a flex container .sub-con , problem is the flex item of .sub-con is refusing to wrap, even after adding : flex-flow: row wrap . Can anyone fix this for me, or point out what I'm doing wrong. .container { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; height: 100vh; } .sub-con { margin-right: 50px; margin-left: 50px; height: 500px; background-color: #fff; display: flex; justify-content: center; flex-flow: row wrap; } .col-one {

问题 I use a third-party component that occupies all the available space, i.e. width=100% and height=100% . I don't have control over it. I'm trying to fit it in the following layout, but its height=100% doesn't work (I expect the third-party component to occupy all the green space). Why? How would you fix that? .container { display: flex; flex-direction: column; width: 200px; height: 100px; } .header { display: flex; background-color: rgba(255, 0, 0, 0.5); } .content { flex-grow: 1; background

问题 The below fiddle has three blocks. block 1 contains three columns. The middle column has two rows within it, each set to flex:1. block 2 contains three columns. The middle column has two rows within it, each set to flex:1. The second row contains an image of a dog. The image will not shrink to the height of the row within which it is contained. block 3 contains only the middle column which has two rows within it, each set to flex:1. The second row contains an image of a dog. The image DOES

问题 I have <ul> element which is a flex items. This <ul> element contains several <li> elements which are not flex items. When I add percentage paddings to <li> elements then <ul> element is split in several lines like in the photo: When I set fixed paddings (like 30px) the <ul> element is displayed in one line: So, my question is: Why percentage paddings make <ul> behave this way? P.S: I don't need solutions to fix it, I just need an explanation of the behaviour li { display: inline-block;

问题 I ran into a problem when using flexbox. I'm using a container with flex-direction: column; flex-wrap: wrap , so my inner items can actually be placed in multiple columns. The problem is that the browser still calculates the container's width as a sum of inner items' widths ! My container block should have a smaller width (based on content size), but it is actually huge. Anyway, it's also very unnatural to calculate container's width this way when using columns, not rows. Take a look at the

问题 I have a flexbox layout containing two items. One of them uses padding-bottom : #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic aspect ratio */ height: 0; } <div id='flexBox'> <div id='padding'></div> <div id='text'>Some text</div> </div> The blue element maintains its aspect ratio

问题 I have a flexbox layout containing two items. One of them uses padding-bottom : #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic aspect ratio */ height: 0; } <div id='flexBox'> <div id='padding'></div> <div id='text'>Some text</div> </div> The blue element maintains its aspect ratio

问题 Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row? I set up a demo on jsbin that illustrates the problem. I'd like for all the children to be the size of their wrapped contents. #container { width: 800px; display: flex; flex-wrap: wrap; } .cell { width: 300px; flex; 1 auto; } <div id="container"> <div class="cell"> Cells with arbitrarily long content.</div> <div

问题 With a flex container and flex-wrap: wrap set you can align overflowing items to the center using justify-content: center . Is there a way to achieve the same behaviour for overflowing grid items using CSS grid? I've created a pen showing the desired flex behavior .container-flex { display: flex; flex-wrap: wrap; justify-content: center; } .container-flex .item { width: 33.33%; background: green; border: 1px solid; } .container-grid { display: grid; grid-template-columns: repeat(3, 1fr); }