flexbox | 易学教程

Do I not understand the flex-grow property?

阅读更多关于 Do I not understand the flex-grow property?

问题 I'm afraid I must not understand flex-grow. If you jump to the JSFiddle below - the way I understand it, .big should be three times the size of the other .flex-item . As you can see, not so. Why? http://jsfiddle.net/nrur6mmo/ .flex-container { display:flex; padding:0 20%; } .flex-item { flex-grow:1; list-style-type:none; border:1px solid black; } .big { flex-grow:3; } <ul class="flex-container"> <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li> <li

How can I make a display:flex container expand horizontally with its wrapped contents?

阅读更多关于 How can I make a display:flex container expand horizontally with its wrapped contents?

问题 When using css flexbox the three main browsers appear to behave entirely differently in certain areas. In this case I am trying to create a grid of images: <div class="container"> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> </div> .container { display:inline-flex; flex-flow : column wrap; align-content : flex-start; height : 100%; } In this example I need a container, itself

Keep the middle item centered when side items have different widths

阅读更多关于 Keep the middle item centered when side items have different widths

问题 Imagine the following layout, where the dots represent the space between the boxes: [Left box]......[Center box]......[Right box] When I remove the right box, I like the center box to still be in the center, like so: [Left box]......[Center box]................. The same goes for if I would remove the left box. ................[Center box]................. Now when the content within the center box gets longer, it will take up as much available space as needed while remaining centered. The

Can we float 2 divs side by side and 3rd one below them?

阅读更多关于 Can we float 2 divs side by side and 3rd one below them?

问题 I want to arrange 3 divs, according to the screen width as follows: For screen-width of < 500px arrangement should be as follows : For screen-width of > 500px arrangement should be as follows : I have tried achieving this in screen size of > 500px but i don't know how to use the same code to achieve arrangement for <500px. My doubt is, can I use the same piece of code to get both the arrangements or is there any other approach ? Can flexbox be used to solve the issue? Here is the snippet:

Can we float 2 divs side by side and 3rd one below them?

阅读更多关于 Can we float 2 divs side by side and 3rd one below them?

Flexbox column cropping image (on iOS only)

阅读更多关于 Flexbox column cropping image (on iOS only)

问题 1) I have been developing a site using flexbox CSS styling to control the site layout. I have been using the FLA Framework to write this site - same as facebook.design. Firebug and Chrome Inspector show no issues with the layout of the code, however on mobile iOS Safari and Chrome, the images are cropping when the flexbox order is being used. (as far as I can tell). Steps I have taken to resolve this are to add the -webkit-order: x; to the stylesheet however this has no effect. The website

Translating an absolutely positioned div

阅读更多关于 Translating an absolutely positioned div

问题 I have this position in this ways, the problem is translating each divs based on what i have. the css is like: .col-md-12 { display: flex; flex-wrap: wrap; } .col-md-12 input:checked + label { color: red; } .col-md-12 input:checked + label + div.slider { color: red; } .col-md-12 div.slide-1 { left: -100%; } .col-md-12 div.slide-2 { left: 0%; } .col-md-12 div.slide-3 { left: 100%; } .col-md-12 input { flex-basis: 3%; margin-right: 27%; order: 1; } .col-md-12 label { flex-basis: 30%; margin-top

Scale image in flexbox to available width OR height

阅读更多关于 Scale image in flexbox to available width OR height

问题 I want an image on a webpage to grow/shrink to the available height or width of a flexbox and keep the original aspect ratio. I have used max-height:100%; max-width:100% on the image but that doesn't work. The page always fills the browser window without overflow. It has 3 rows: a title at the top with fixed height an article, with image and description side by side a footer at the bottom with fixed height The image should grow/shrink with the available height or width, depending on the

Difficulty in Designing Business card using CSS

阅读更多关于 Difficulty in Designing Business card using CSS

问题 I am trying to make a business card with name and title in the center and email and phone to be on extreme left and right on the card Here is my following code .business-card{ position:relative; border:1px solid black; width:200px; } .business-card section { display:flex; flex-flow:column; align-items:center; } .email{ position:absolute; right:0; } <div class="business-card"> <section> <span> name:abc </span> <span> title:xyz </span> </section> <footer> <span class="phone"> 123-123-123 </span

在CSS Flexbox中，为什么没有“ justify-items”和“ justify-self”属性？

阅读更多关于在CSS Flexbox中，为什么没有“ justify-items”和“ justify-self”属性？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 考虑伸缩容器的主轴和横轴：资料来源： W3C 要沿主轴对齐弹性项目，有一个属性： justify-content 要沿十字轴对齐弹性项目，需要三个属性： align-content align-items align-self 在上图中，主轴是水平的，而横轴是垂直的。这些是flex容器的默认方向。但是，这些方向可以很容易地与 flex-direction 属性互换。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; （交叉轴始终垂直于主轴。）在描述轴的工作方式时，我的观点是，任一方向似乎都没有什么特别之处。主轴，横轴在重要性方面均相等，并且 flex-direction 使其易于来回切换。那么，为什么十字轴具有两个附加的对齐属性？为什么将 align-content 和 align-items 合并为主轴的一个属性？