flexbox

horizontally scrolling flex child

由 风格不统一 提交于 2019-12-24 06:33:47
问题 I have been scowering the web, but can not seem to get a solution to work. Here is an example codepen: http://codepen.io/anon/pen/Wxjjqp .container { display: flex; } .horizontally-scrolled-items { display: flex; background: lightblue; overflow-x: scroll; } .item { width: 1000px; border: 1px solid blue; } html: <div class="container"> <div class="horizontally-scrolled-items"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> </div> <div class="aside">

How to select even rows with list items

由 梦想的初衷 提交于 2019-12-24 06:31:19
问题 I have the following layout with an unordered list: https://codepen.io/barkins/pen/qjrpKJ ul{ max-width:1200px; list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; } li{ width:12%; @media (max-width:720px){ width:16%; } @media (max-width:480px){ width:22%; } } I need to select only even rows, no matter the media query break points to add a border to only the 2nd row. .second-row-items{ border:1px solid red; } Is this possible to do with CSS and perhaps JavaScript (jQuery)

Make flex item expand on hover, shrinking its siblings

由 穿精又带淫゛_ 提交于 2019-12-24 06:28:54
问题 I'm trying to solve a flexbox issue where I want to have three divs per row, first equal in size, but when hovering a div, that one grows and the other ones on the same row shrink. Thought I had solved it until I tried it over multiple rows. What I want is when hovering the third div, it would shrink the first and the second div, and leave the rest unchanged. And I can't figure that part out. Below is my single-row working solution. Can this layout work over multiple rows as well? Do I have

Using Bootstrap 4 flexbox to equally divide four charts

由 早过忘川 提交于 2019-12-24 06:21:03
问题 I am trying to plot four different stacked charts in one browser window as shown here. But as it is, the size of the charts aren't equal. I have tried tweaking various CSS properties, but being unfamiliar with CSS+HTML layout, I wasn't able to. Any suggestion/help would be greatly appreciated. Thank you. All of my code is below: <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/autocomplete-0.3.css" /> <link rel="stylesheet" href="https

css two rows 1 column box layout

由 久未见 提交于 2019-12-24 04:20:55
问题 I've been working on a two row and 1 column layout with flexbox, I'm using flexbox because I don't think css2.1 can fill the remainding space for box-B. In my example of my jsFiddle, I can't get box-C to shift up on the right hand side and also I can't get box-B to flex vertically and fill the contents can someone please help me with this layout jsFiddle here #container { background-color:red; width:100%; height:100% } #three-box-layout { display:flex; display:-ms-flex; display:-webkit

CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE

由 匆匆过客 提交于 2019-12-24 03:51:30
问题 I have this situation: https://jsfiddle.net/rozkvsdh/5/ A CSS Grid, simply, but in some items, I need to put a ribbon or another div. It's impossible! How can I do? grid-item { background-color: lightgreen; display: flex; justify-content: center; align-items: center; } .ribbon-wrapper { width: 85px; // the length should be not in px I think! height: 88px; // the length should be not in px I think! overflow: hidden; //position: absolute; it doesn't work! position: relative; top: -3px; left:

Why is my image being distorted (shrunk) in Firefox?

由 北战南征 提交于 2019-12-24 03:49:12
问题 This problem occurs on Firefox. On Chrome all is well. I have a magnifying glass image next to my search fields. However, on Firefox the image is being distorted (shrunk) and I can’t figure out why. Here’s the Fiddle — https://jsfiddle.net/k01jLb28/3/. Here are the styles I’m applying to my search fields: */@media screen and (max-width: 500px) { /* line 19, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */ body { margin: 0px; } /* line 23, /Users/davea

Flex header, content, footer layout

由 旧巷老猫 提交于 2019-12-24 03:20:38
问题 In the following code, I want the content section to fill out to the point the footer hits the bottom of the screen. EDIT: perhaps I should've been a bit more clear with the center align. The header and footer should be vertically aligned and all three items need to start from the left vertical line as shown below: How can I achieve this? html, body { margin: 0; padding: 0; } container{ display: flex; flex-direction: column; position: fixed; top: 0; width: 100%; } header { height: 92px;

Scale transform causes rendering gap with flex layout

由 点点圈 提交于 2019-12-24 03:13:05
问题 I'm using flex layout in order to render a container div with 3 evenly sized columns. It works just as I'd expect, until I apply a scale transform. When the container is scaled down, thin gaps appear between the content boxes. The issue happens on MacOS Chrome and Safari, but not Firefox. I believe I'm seeing a rendering bug, but wondering if anyone might have ideas for a workaround. Here's a greatly simplified example which demonstrates the problem in Chrome: body { background: black; margin

When using `nowrap` within a flex row, avoid pushing the last elements off the screen

由 戏子无情 提交于 2019-12-24 02:54:10
问题 I need to render a long text within a one line. and an image in the end of the line (tight end of the screen). Given a very long text, I have to simply truncate it. The text should now go into a second line because it is too long. please see my code. how can avoid pushing the nice emoji out of the screen? Please take into account that the elements on the right side might be dynamic. so giving a fixed width is not good enough. div { display:flex; justify-content: space-between; } span { white
订阅 flexbox