I have one parent div which height is 450px. And 3 child div which height is 150px each. i want to align this 3 div using flex. and the position is 1div: left-corner, 2div:center, 3div:bottom-right.
give me the solution using only css flexbox.
Try this,
display:'flex',
height:'450px',
justifyContent:'space-between'
Edit
<div
style={{
display: "flex",
height: "450px",
flexDirection: "column",
}}
>
{/* top */}
<div
style={{
display: "flex",
}}
>
<div style={{ flex: "0 0 25%", border: "1px solid" }}>
<h1>left</h1>
</div>
<div style={{ flex: "0 0 25%", border: "1px solid" }}>
<h1>center</h1>
</div>
</div>
{/* bottom */}
<div
style={{
display: "flex",
justifyContent:'flex-end'
}}
>
<div
style={{
flex: "0 0 50%",
border: "1px solid",
}}
>
<h1>bottom right</h1>
</div>
</div>
</div>
Related
Hi I'm trying to vertically and horizontally center a grid div by using flexbox inside a another div with a background image. It goes to the top left.
.flex_center {
display: flex;
align-items: center;
justify-content: center;
background-color: coral;
opacity: 0.7;
width: 1300px;
height: 485px;
z-index: 0;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-rows: 161px 161px 161px;
grid-template-columns: 360px 940px;
background-color: coral;
}
<section class="hero">
<div class="flex_center">
<div class="grid">
<div class="grid-item-1"><img src="images/logo_hero.png" class="logo_center"></div>
<div class="grid-item-2">
<p class="center">KIA'PALANO SEAFOODS</p>
</div>
<div class="grid-item-3">
<p class="squamish">A Squamish tribal-owned seafood company <br> located along the Squamish River, B.C</p>
</div>
<div class="grid-item-4">
<div class="button">COME ON IN</div>
</div>
</div>
</div>
</section>
I can't print firstname, lastname, place and buttons, on the same line in react.js.
this.state.students.map(student => (
<div key={student._id}
class="card"
style={{
borderRadius: '10px',
padding: '15px',
backgroundColor: 'whitesmoke',
marginLeft: '15px',
marginTop: '20px'
}}
>
<div class="card-body" style={{ display: 'inline-block' }}>
<div class="container">
<div class="row">
<div class="col-6">
<div style={{ marginLeft:'20px' }}>
{student.firstname}
</div>
<div style={{ marginLeft: '20px' }}>
{student.lastname}
</div>
<div style={{ marginLeft: '20px' }}>
{student.place}
</div>
<button type="button" class="btn btn-warning">
UPDATE
</button>
<button style={{ marginLeft: '20px' }} class="btn btn-danger">
DELETE
</button>
Why items dont shrink in inline-flex. But it works fine in normal flex. Maybe it is supposed to work that way, I dont know. Maybe it is somewhere in the spec but I coudn't find anything related. I would be grateful if someone could explain this.
.container {
width: 100px;
margin 0 auto;
margin-top: 100px;
background-color: green;
}
.inline-flex {
display: inline-flex;
margin-bottom: 10px;
}
.flex {
display: flex;
}
.item {
width: 50px;
height: 50px;
margin-right: 5px;
background-color: blue;
}
<div class="container">
<div class="inline-flex">
<div class="item">no-shrink</div>
<div class="item">no-shrink</div>
<div class="item">no-shrink</div>
</div>
<div class="flex">
<div class="item">shrink</div>
<div class="item">shrink</div>
<div class="item">shrink</div>
</div>
</div>
As stated before, flex acts like a block and inline-flex like inline-block on the outside and their children behave identically. The flex-items .item are acting totally different when they should appear the same because their behavior is influenced by the flex-container (.flex and .inline-flex). Aside from the flex-containers having different display values, there are no other differences.
Each .item of .inline-flex has retained it's width of 50px
Each .item of .flex has a width of 34.6687px
I still haven't figured out why this is but I have 3 different solutions:
.container is too small, increase it's width.
See Example A
Figure I
.container {
width: 200px;
/* Increase .container to at least the .offsetWidth of the 3 .item`s */
Change the flex properties of .items or assign min-width
See Example B
Figure II
.B .item {
flex: 0 0 50px;
/* OR */
/* min-width: 50px */
}
*,
::before,
::after {
box-sizing: border-box;
}
.container {
width: 100px;
background-color: green;
}
.A {
width: 200px;
}
.inline-flex {
display: inline-flex;
margin-bottom: 10px;
}
.flex {
display: flex;
}
.item {
width: 50px;
height: 50px;
margin-right: 5px;
background-color: blue;
}
.B .item {
flex: 0 0 50px;
/* OR */
/* min-width: 50px */
}
h3 {
margin: 0 0 4px 0
}
<h3>OP</h3>
<div class="container">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
<h3>Example A</h3>
<div class="container A">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
<h3>Example B</h3>
<div class="container B">
<div class="inline-flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
<div class="flex">
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
<div class="item">XXX XXX</div>
</div>
</div>
This is the code tried everything, how do u put a background photo
import React, { Component } from "react";
import Photo from "./Emoticons/A.jpg";
class Contact extends Component {
render() {
return (
<div className="contact" style={{ width: "1200px" }}>
<div className="row ml-5">
{/* Prva */}
<div className="col-sm mt-5">
<div
style={{
boxSizing: "content-box",
boxShadow: "-2px -2px 5px #000000",
height: "400px",
width: "345px"
}}
>
<h2 style={{ textAlign: "center" }}>Info</h2>
</div>
</div>
{/* Druga */}
<div className="col-sm mt-5">
<div
style={{
boxSizing: "content-box",
boxShadow: "-2px -2px 5px #000000",
height: "400px",
width: "345px"
}}
></div>
</div>
{/* Treca */}
<div className="col-sm mt-5">
<div
style={{
boxSizing: "content-box",
boxShadow: "-2px -2px 5px #000000",
height: "400px",
width: "345px"
}}
></div>
</div>
</div>
</div>
);
}
}
export default Contact;
Tried background:'photo', nothing.
You just need to use the javascript equivalent of the CSS properties. For example:
const backgroundPhotoUrl = "..."
<div style={{
backgroundImage: `url(${backgroundPhotoUrl})`,
backgroundPosition: "center center",
backgroundSize: "cover",
}}>
{...}
</div>
How can I make a header with 4 equally spaced items in React Native?
Coming from a web dev background, the following flexbox produces 4 equally spaced items:
<html>
<head>
<style>
#header {
display: flex;
flex: 1;
flex-direction: "row";
height: 20px;
}
.item {
flex: 1;
background-color: red;
}
</style>
</head>
<body>
<div id="header">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
That HTML produces this:
However, with React Native, the same thing doesn't seem to work:
var navbarStyles = StyleSheet.create({
navbar: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
height: 20
},
navbarItem: {
flex: 1
}
});
var Navbar = React.createClass({
render: function() {
return (
<View style={navbarStyles.navbar}>
<View style={navbarStyles.navbarItem}>
<Text>Item 1</Text>
</View>
<View style={navbarStyles.navbarItem}>
<Text>Item 2</Text>
</View>
<View style={navbarStyles.navbarItem}>
<Text>Item 3</Text>
</View>
<View style={navbarStyles.navbarItem}>
<Text>Item 4</Text>
</View>
</View>
);
}
});
Hi I did the above code and it works fine and gives output like the html example you have given above. And if you need to center align all text instead of the beginning of each subview, you could use alignItems to 'center' at navbaritem.
I beleive you are facing the error because of the style of parent view above it. try fixing that. try giving a backgroundcolor to navbar and you will get some idea of issue.
You can do this for parent
parent:{
flex: 1,
flexDirection:'row'
}
and then child items
child:{
flex: 1,
}