flexbox

float does not work in a flex container

由 耗尽温柔 提交于 2020-01-26 09:44:09
问题 I want to position text (foo link) in right of the footer element. I need footer display to remain flex . But when I set it to flex , float:right for span doesn't work anymore. <footer style="display: flex;"> <span style="text-align: right;float: right;"> <a>foo link</a> </span> </footer> https://jsfiddle.net/dhsgvxdx/ 回答1: The float property is ignored in a flex container. From the flexbox specification: 3. Flex Containers: the flex and inline-flex display values A flex container establishes

flexbox margin collapsing between children [duplicate]

由 岁酱吖の 提交于 2020-01-25 22:02:28
问题 This question already has answers here : Margin collapsing in flexbox (2 answers) Closed 2 years ago . 2 element inside a container with display:block margins collapse, but with display:flex is not working ! example .wrapper { width: 50%; margin: 0 auto; } .container { display: flex; // display: block; flex-flow: column nowrap; background-color: green; } h1 { background-color: #777; margin-bottom: 20px; } p { background-color: #ccc; margin-top: 15px; } 回答1: Margins does not collapse when one

flex not working to make design responsive

由 99封情书 提交于 2020-01-25 07:27:06
问题 I am using React Material components in my application, to make it responsive to various screen sizes i am trying to use flex . Below is my code <div style={{ display: 'flex', flexWrap: 'wrap', flexWrap: "wrap" }}> <div style={{ flexGrow: 1, flexBasis: "25%" }}> <Chip /> </div> <div style={{ flexGrow: 1, flexBasis: "25%" }}> <Chip /> </div> <div style={{ flexGrow: 1, flexBasis: "25%" }}> <Chip /> </div> <div style={{ flexGrow: 1, flexBasis: "25%" }}> <Chip /> </div> </div> In the above code

How to create a sidebar with 2x3 grid next to it

由 走远了吗. 提交于 2020-01-25 06:40:06
问题 I want to create a sidebar and a grid that has 2 rows and 3 columns (beside the sidebar). I already have a nav bar and a footer (just a layout, links are not supposed to work) I have no idea how to create that sidebar and main content grid with flexbox. Oh and the superman logo: I can't center it vertically for some reason. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>web1</title> <link rel="stylesheet" href="style.css"/> </head> <body> <div class="menu-container">

Responsive layout without media query

由 ℡╲_俬逩灬. 提交于 2020-01-25 02:31:53
问题 I'm looking for a creative way of doing responsive layout without media query. Let's say I have a row of two boxes. First one has min width of 400px. Second one has min width of 200px. The gap between them is fixed width 60px. If the container is larger than 660px, then two boxes should expand proportionally. If the container is less than 660px, then the second box should go to next line, and both boxes' widths should be 100%. I almost got it with css flexbox. See here. Except that when the

Microsoft Edge Flexbox padding behavior

由 ╄→尐↘猪︶ㄣ 提交于 2020-01-25 01:22:24
问题 I just completed this website: http://groepsmanager-rspo.com. It renders perfectly in modern browsers such as Chrome 47 and Internet Explorer 11. In Microsoft Edge, the 5% padding-top and padding-bottom are ignored. display:flex has been applied to the divs in question, and they have a percentage padding-top and padding-bottom. @media only screen and (min-width: 768px) { .row { display: flex; } .twothird, .threethird, .onethird, .onehalf, .onefourth, .threefourth, .twofourth { padding: 5%; //

How do I align an item to the right inside a flex container?

由 泄露秘密 提交于 2020-01-24 23:36:27
问题 I'm starting to use flex box but not sure how I set an element inside a flex container to be positioned on the right side? I've tried applying align-self: flex-end and justify-content: flex-end with no success so I'm hoping someone can help me out? CSS .ctn { background: lightblue; height: 100px; padding: 10px; display: flex; align-items: center; } .btn { outline: none; border: none; color: navy; background: lightyellow; height: 50px; line-height: 50px; width: 200px; text-transform: uppercase

How do I align an item to the right inside a flex container?

由 天大地大妈咪最大 提交于 2020-01-24 23:36:26
问题 I'm starting to use flex box but not sure how I set an element inside a flex container to be positioned on the right side? I've tried applying align-self: flex-end and justify-content: flex-end with no success so I'm hoping someone can help me out? CSS .ctn { background: lightblue; height: 100px; padding: 10px; display: flex; align-items: center; } .btn { outline: none; border: none; color: navy; background: lightyellow; height: 50px; line-height: 50px; width: 200px; text-transform: uppercase

max-width not functioning correctly in flex-box on IE11

由 为君一笑 提交于 2020-01-24 21:53:16
问题 In IE11, if you define a width for a flex-box and a child img element has a max-width of 100%, it will not respect the max-width . Has anyone found a solution for this? This works in IE10, Chrome, and Firefox but breaks for IE11: http://jsfiddle.net/3ky60heq/ .container { display: -ms-flexbox; display: -webkit-flex; display: flex; width: 500px; height: 125px; } .image1 { width: 100%; } .image2, .image3 { max-width: 100%; } <div class='container'> <img class='image1' src="https://clagnut.com

Make image fill screen on click

由 ▼魔方 西西 提交于 2020-01-24 21:11:08
问题 I have a layout with a header and a few images as content. I would like when any image is clicked, it expands to fit the screen with a transition. jQuery and JS are fair game. Here is what I have, I just can't get it to work with transition because of the position changes. It also should cover the header and doesn't. $( document ).ready(function() { $( "main img" ).click(function() { $(this).toggleClass("click"); }); }); html, body { height:100%; margin:0; padding:0; } header { height:25%;
订阅 flexbox