flexbox

Is there a way to change the order of items when wrapping?

由 拈花ヽ惹草 提交于 2021-02-16 16:37:32
问题 I'm trying to create a part of a website, with 3 parts (let's call them A, B, C), where A and B are beside each other (aligned to touch opposite sides of a container), and below them is C, but when A, and B don't fit beside each other in the container, B wraps below C instead of between A and C. A, B and C all have expanding-collapsing components, and the container can be resized by other elements, so all their sizes are unknown. This means that using @media is out of the question. Expected

flexbox space-between and align right

由 ε祈祈猫儿з 提交于 2021-02-15 12:13:45
问题 I have a div with 1 to 3 items and I want them to behave like this : Three items : take the whole line with justify-content: space-between +-----------+ | 1 | 2 | 3 | +-----------+ If there is only 1 item, align it to the right. +-----------+ | | 3 | +-----------+ Here's my code : .container { display: flex; width: 300px; justify-content: space-between; /* Styling only */ padding: 10px; background: #ccc; margin-bottom: 10px; } .container div { /* Styling only */ background: white; padding:

flexbox space-between and align right

由 守給你的承諾、 提交于 2021-02-15 12:03:15
问题 I have a div with 1 to 3 items and I want them to behave like this : Three items : take the whole line with justify-content: space-between +-----------+ | 1 | 2 | 3 | +-----------+ If there is only 1 item, align it to the right. +-----------+ | | 3 | +-----------+ Here's my code : .container { display: flex; width: 300px; justify-content: space-between; /* Styling only */ padding: 10px; background: #ccc; margin-bottom: 10px; } .container div { /* Styling only */ background: white; padding:

Justify-content: space-between works incorrect

由 大兔子大兔子 提交于 2021-02-11 16:51:37
问题 i have the following code header { width: 100%; height: 65px; background: #fff; font-size: 11px; font-weight: bold; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; color: #252c3a; } #menu { width: 100%; display: flex; margin-left: 28%; } #menu div { width: 100px; height: 65px; display: flex; align-items: center; justify-content: center; position: relative; } <header> <div id="logo"> <img src="img/header/logo.png" alt="Logo"> </div> <div id="menu"

Draw lines between circles css

由 半腔热情 提交于 2021-02-11 13:53:41
问题 I'm trying to draw lines between circles, i have this code https://codepen.io/cfmorales/pen/qBEqGpr, in some way it works but when you resize the page the height of the line doesnt match to the circle, any ideas of how can i make it responsive? all the magic is in the :before td:nth-child(2) { vertical-align: baseline; } td:nth-child(1) { display: flex; justify-content: center; margin-right: 28px; width: 42px; height: 42px; border: 1px solid #999999; border-radius: 100%; text-align: center;

React Native: Make Each Child of ScrollView Full Height

由 余生长醉 提交于 2021-02-11 12:14:27
问题 I have a ScrollView which has two children, and I want each of the children to be the full height of the available space on the screen, meaning view 1 fills the whole screen, and then I scroll down to start to see part of slide 2. If I scroll all the way down, I should only see slide 2. I can't figure out how to get this to happen. What is currently happening is that each child is filling half of the available vertical space, so I don't get any scrolling. Any ideas how I can achieve this

Make login form responsive with Flexbox

由 喜欢而已 提交于 2021-02-11 06:12:58
问题 I have a simple login form that am trying to make nice looking on all screen sizes. I am stuck in my code, with these labels that need to be position above the input field. Also when you try to resize the screen form behavior is very strange in the Firefox form are completely messed up. Below is my code <!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <title

all divs with same height in a flexbox with at the bottom

由 你离开我真会死。 提交于 2021-02-10 14:27:48
问题 I have the following html to build a grid with bootstrap 4. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="row"> <div class="col-sm-12 col-md-3"> <div class="row"> <div class="col-lg-12"> here are different heights possible </div> </div> <div class="row align-items-end"> <div class="col-lg-12 date"> should always be at

Make flex item siblings the same height

由 怎甘沉沦 提交于 2021-02-10 12:20:08
问题 I have this simple example: .container { display: flex; background-color: #ddd; align-items: stretch; } .logo {} .text { font-size: 300%; } <div class="container"> <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div> <div class="text">TEXT</div> </div> I need image to get same height as sibling div on right side not vv, i.e. shrink image to actual text height and keep aspect ratio. 回答1: How is one sibling supposed to

【CSS】343- CSS Grid 网格布局入门

由 爱⌒轻易说出口 提交于 2021-02-10 08:10:31
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。 它还能使我们在不改变任何HTML的情况下，使用 CSS 来定位和调整网格内的每个元素。它允许 HTML 纯粹作为内容的容器。 HTML 结构不再受限于样式表现，比如不要为了实现某种布局而多次嵌套，现在这些都可以让 CSS 来完成。 定义一个网格 Grid(网格) 模块为 display 属性提供了一个新的值： grid 。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个 网格容器(grid container)，它的所有直接子元素就成了 网格项(grid items)。 让我们创建创建一个 3×3 的布局，做一个 Tic-Tac-Toe (井字游戏) 棋盘。首先，我们将写一些 HTML： HTML 代码： <div class = "game-board" > < div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" >
订阅 flexbox