Material ui flex grow

Material ui flex grow DEFAULT

Material UI Grid Component - Tutorial and Examples

Material UI's Grid layout system is mostly a wrapper around the "CSS Flexible Box module", also known as Flexbox. See the official spec for Flexbox here.

This particular library is an example of why you should read the source code of libraries to understand how they work at a deeper level. Without an understanding of Flexbox, you won't understand what most of the props are doing here. Similarly, if you've mastered Flexbox or CSS Grid already, you may find it more comfortable to implement your own grid with your own CSS.

So while it's not required to use Material UI's Grid to build grids in your application, using it does have some advantages (and disadvantanges).

A Brief Explanation of Flexbox

Let's refer to the W3 spec on the exact terms we'll be using.

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

So to keep the definition really simple, a flex container is an element with CSS . That's it, by that one CSS property, that element becomes a flex container and the children of that element magically become flex items. Check out Example 1 below for a simple example of a pure flexbox with no other CSS properties other than a border on the items so you can see how they are laid out by default.

Properties of Flexbox

Of course there is no better site than CSS Tricks for the complete visual guide of flexbox. As Material UI uses Flexbox under the hood for their Grid, you should at least know a few key properties. Using the property, you can specify a unitless value (like 2,2,4,4) to proportionally scale the widths of the items or have one item take up the remaining space. accepts more normal width values (33%, 100px) to use as the default column width before applying properties. Material UI uses and to set the widths of the columns this way with the below breakpoint properties. In all honesty, Flexbox is just more confusing than CSS Grid properties, which can specify column widths a bit more expressively with the prop.

So how does Material UI Grid compare to Flexbox?

Material UI Grid's grid uses Flexbox under the hood. The properties of Flexbox are used as properties of the Grid, so you can control the component as if it were a flexbox. Additionally, Material UI's Grid also provides helpers for spacing, responsive design, and fitting a 12 column layout. To see all the properites of Grid, check out the Grid API or look at the bottom of the Grid source code to see prop types.

Now for the tricky part: using breakpoints as props to the Grid, we can specify how many columns we want that component to take up, for each of the breakpoints. We'll explain this in our responsive design section. First let's look at the breakpoint values.

Material UI Breakpoints

Looking at Material UI's default breakpoints, we can see these are the horizontal screen sizes we will use as props to the Grid component. These are also used elsewhere in Material UI.

xs, extra-small:0px

sm, small:600px

md, medium:960px

lg, large:1280px

xl, extra-large:1920px

Material UI Grid Responsive Design

So how do we implement responsive design with Material UI's Grid? As you can see in our Example 4 component in the above Sandbox:

importReactfrom"react";

import{ makeStyles }from"@material-ui/core/styles";

importPaperfrom"@material-ui/core/Paper";

importGridfrom"@material-ui/core/Grid";

const useStyles =makeStyles((theme)=>({

paper:{

padding: theme.spacing(1),

textAlign:"center",

color: theme.palette.text.secondary

}

}));

functionGridItem({ classes }){

return(

<Grid item xs={12} sm={6} md={3}>

<Paper className={classes.paper}>item</Paper>

</Grid>

);

}

exportdefaultfunctionAutoGrid(){

const classes =useStyles();

return(

<div>

<h3>Ex4:ResponsiveMaterialUIGrid</h3>

<Grid container spacing={1}>

<GridItem classes={classes}/>

<GridItem classes={classes}/>

<GridItem classes={classes}/>

<GridItem classes={classes}/>

</Grid>

</div>

);

}

Observe the comments in the GridItem to get a feel for how this works. We are specifying multiple breakpoints to progressively use 4 columns on desktop, 2 columns on tablet, and 1 column on phones. This level of customization is usually only found on apps like landing pages, where multi-media components need special handling on each device. Most often, you'll find yourself collapsing 2 column layouts on desktop into 1 column layouts on mobile phones.

Material UI Templates using Grid

Looking for a downloadable project with tons of Grid examples? All of React School's Material UI Templates use Material UI Grids. Check out the free project to see our Grids in action!


Official Docs for Material UI Grid

Grid API

Sours: https://react.school/material-ui/grid

The flexbox module is a direction agnostic layout system made for managing the layout of a component. Flex is designed for optimizing layout when available space is unknown or dynamic.

The flexbox layout includes props set on both parent and children elements to control child size and order. Read an incredibly detailed overview of the flexbox module here.

The Material-UI Flexbox system lets you quickly apply flex properties from the flexbox module without adding CSS classes or inline styling. Instead, simply apply props such as , , and .

In this article, we’ll briefly cover the properties for parent components in Material-UI’s flexbox system. I already covered them extensively in this article on aligning items in any direction in Material-UI’s Grid. Mostly we’ll focus on the child properties (). We will create the series of layouts below and analyze them:

In MUI V4, Container does not have access to the flex system, but Box and Grid components do. Even the Grid component only has access to the parent flex properties. If you wanted, you could still create a flex container component by manually applying CSS flexbox styling.

Align-Self

Each of the layouts pictured above are composed of a parent Box component and three or four child Box components.

The first layout uses (which is the default). This aligns items in a horizontal layout of one row, three columns. The second layout uses . This aligns the children items in a vertical layout of one column, three rows. See the below image captured before alignSelf was used to override alignItems.

Both of these layouts utilize at the parent level. All children items will be aligned at the ‘start’ of the parent area: for rows this means ‘top’ and for column it means ‘left’. The ‘flexDirection row 1’ and ‘flexDirection column 1’ components are examples of this.

The alignSelf property is a child-level property that overrides the parent level alignItems value (read more about align-self here at MDN). Also, when discussing CSS, the syntax uses hyphens (align-self) but in JS the syntax is camel case (alignSelf).

Here are the alignSelf values and results in the first two layouts:

  • ‘flexDirection row 2’: alignSelf=”center” === vertical center
  • ‘flexDirection row 3’: alignSelf=”flex-end” === vertical bottom
  • ‘flexDirection column 2’: alignSelf=”center” === horizontal center
  • ‘flexDirection column 3’: alignSelf=”flex-end” === horizontal right

Here’s the code that accomplishes this:

Flex-Grow

The flexGrow property (flex-grow in CSS) is used to set the size of an element relative to it’s siblings within a flex container (a Box component in this case) and dynamically grow relative to available space .

Elements with equivalent flexGrow values will get the same amount of space. An element with will have twice the size as an element with .

Interestingly, if you set it has the effect of keeping an item from growing beyond it’s original size. This is hard to notice, but is more obvious when using as I’ll show in the next section.

Above is Layout 3, which is composed of three Box components. The first and third have the same flexGrow value and evenly take up all the width except for the width taken up by ‘flexGrow 2’. This center box has the same width in this case whether flexGrow is zero or removed altogether.

Flex-Shrink

The flexShrink property (flex-shrink in CSS) is used to set the size of an element relative to it’s siblings within a flex container (a Box component again in this case) similar to flexGrow. However, the emphasis here is if child elements combined are larger than the parent container, flexShrink values determine how sibling elements shrink proportionately to fit the space.

I artificially constrained the width of the parent Box to 40%. The children have the following values:

  • ‘FlexShrink1’: , receives up 2X the space of FlexShrink3 component
  • ‘FlexShrink2’: , does not shrink below it’s initial value
  • ‘FlexShrink3’: , half the space of FlexShrink1
  • ‘FlexShrink4’: No flexShrink value assigned, it receives the same width as FlexShrink1

Resources

Code Sandbox Link

Read how to align buttons in a variety of layouts with the Box component here.

Share this post:

Categories JavaScript, Material UITags flex, flexbox, material ui flex grow, ReactSours: https://smartdevpreneur.com/material-ui-flexbox-system/
  1. Are honda navigation updates free
  2. Toll brothers ranch floor plans
  3. City of mesa property taxes

“material ui grid no grow” Code Answer




3

Source: material-ui.com

Add a Grepper Answer


Javascript answers related to “material ui grid no grow”


Javascript queries related to “material ui grid no grow”




Browse Javascript Answers by Framework


More “Kinda” Related Javascript Answers View All Javascript Answers »

  • materialize open modal on load
  • rendering an array inside an array in react
  • check uncek react-bootstrap-table reactjs
  • react-redux form preventdefault
  • react barcode scanner
  • how to add a key in a react element
  • react prevent form submission on enter key press inside inputs
  • calendly with react
  • page is loading from previous page scroll in reactjs
  • reactstrap search bar
  • Write a Counter with Redux
  • what does onchange do in react
  • how to get element from arraylist react
  • how to get value from onClick handler in react
  • react native paper datepicker
  • reacts mos twanted
  • csv upload with react
  • number format reactjs
  • react pdf add to existing pdf
  • does hex rgba work in react inline styling
  • how map work in react
  • react chunk file too large
  • snackbar in react
  • form in react js
  • search bar in react js material ui
  • material ui icons
  • semantic ui react pop
  • react big calendar messages
  • scroll to top react
  • reset navigation to specific tab react-navigation
  • remove duplicate id in list react jsx
  • live background react
  • card shadow material ui
  • date picker type react
  • fullcalendar edit event modal react
  • set meterial icon color change onClick react
  • how do i make a link to direct me to a new page when i click on a button in react
  • how to add css based on route react
  • react-slick
  • set image as background react
  • react bootstrap hide toggle menu when scrolling down
  • cascading dropdown for forms react
  • multiple image upload react
  • date range picker react
  • react multiple select dropdown
  • tailwind css react craco package.json
  • react tooltip on disabled button
  • tailwind css in react
  • input text react 2020
  • check box react js
  • lift state up react
  • react google places auto complete example
  • how to overright date picker styles material ui
  • hide urls in .env in react app
  • react if event.target is input
  • react js if statement
  • redux toolkit reducer
  • if statement is a fine way to conditionally render a component
  • change style on click react
  • react multiple if statement in style
  • tolltip in react js
  • can't import react bootstrap
  • Install React Bootstrap
  • && in react jsx
  • react ternary operator
  • react js expand table row
  • how to upload image in react js
  • react-sound example
  • ant design form validation in the modal
  • conditional rendering react
  • react create array
  • react arrays
  • react map
  • react material ui
  • next.js with material ui
  • materialui
  • material ui insall
  • material ui grid react
  • react style css image
  • USE ICONS IN REACT
  • dark mode with react hooks
  • how to change currency in react-paypal-button-v2
  • React tagInput component
  • how to include local image files in javascript object
  • get an image from an array react
  • changing map style react-leaflet
  • text color in react js
  • How to Submit Forms and Save Data with React.js
  • warning prop classname did not match. server material ui
  • timeline material ui react native
  • rich editor react
  • react-toastify
  • pre selected data-grid material-ui
  • react make an ascending descending button
  • download comma separated file, react
  • semantic ui react modal
  • create dynamic fields in react
  • table like another component in react native
  • react reset file input
  • make a button who disable scrolling down the page react
  • barcode scanner react js
  • react map gl marker offset
  • react-map-gl custom markers don't stay at exact position on zoom
  • redux form Field input prop
  • react map gl marker
  • react if condition in map
  • owl carousel for react
  • materal ui react range slider
  • timezone in react js
  • fc in react
  • how to turn of autocomplete in react hook form material ui
  • material ui phone number input
  • react ntive
  • react-select example
  • ant design react
  • javascript react
  • todo list in react
  • what is reactstrap
  • framer motion react
  • redux-thunk example
  • react-data-table-component
  • horizontal scrollview in react js
  • conditional style react
  • react toolkit
  • jsx .style on hover react
  • react audio player
  • navlink react
  • gatsby markdown link blank
  • convert css box shadow to react native
  • Autocomplete an Address with a React hook Form
  • react buffer to image
  • redux-thunk action creator
  • hide react from netlify
  • reactjs facebook login popup trigger on load page
  • onclick on fragment react
  • material ui table row height
  • add moving background to react app
  • chrome back button click event react
  • 3 2 1 go countdown react js
  • react Mixed symbols
  • unexpected token expected react map
  • react select remove the loading indicator
  • add update react pwa feature
  • open modal on clicking select option in react
  • validator max e min redux form
  • how to solve "Unexpected use of comma operator no-sequences" error in react
  • react-map-interaction
  • how to pass an id to the route of a seprate file react
  • infinite image slider with react and node js
  • highcharts react hide data point dots
  • why i my price showing NaN react js
  • react load more listview
  • minvalue validation react admin
  • atomic design with redux
  • how to hide button after scrolling to top in react
  • how to make item not dragable in react-sortablejs
  • hide column in antd table using js / react with conditional rendering
  • how to use adminlte in reacts
  • npm ERR! peer [email protected]"^15.x.x" from [email protected]
  • react nattive blur virew
  • react awesome stack overflow
  • box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15);
  • nuxt js lazy load page pagination
  • How to reset ReactJS file input
  • react-hook-form-input npm
  • Typing for react-step-progress-bar
  • time picker in react example
  • how to trigger on Blur only when clicked outside parent component and not child component in react js
  • how to use two text fields in one single row react js
  • datepicker range npm reactjs
  • react coutndown
  • react Update a label when rate moves "quietly"
  • algolia react hits
  • material ui pickers keyboarddatepicker using different language
  • preventdefault not working react
  • google-maps-react give undefined lat long
  • how to remove warnings in react js console
  • reactvs y axis range
  • manually give path to the new route highlighting the menu item react
  • react unfocus check
  • iconify react
  • 'unsafe-inline' react
  • open last tab after reload tab pill bootstrap
  • click point invert zoom react simple map
  • React Load api data with Loading indicator
  • input type disappear side scroll react
  • setimeout react button
  • how to change style class by using onclick function with multiple buttons in react js
  • react-anime
  • change size of font awesome icon react
  • react js text input with icon
  • react read multiple files with filereader
  • react duration picker
  • conditional rendering in react js stackoverflow
  • react js child css
  • box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15); to react native
  • Material-ui add comment icon
  • Which react-bootstrap component you will use for width: 100% across all viewport and device sizes
  • animation in react js example
  • row smaller than the container bootstrap react
  • notification bell icon bootstrap react
  • sidebar submenu semantic ui
  • error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent
  • kendo-react-ui grid toggle checkbox
  • react google map doesn't update marker
  • cheditor wont open style material ui modal
  • react Update a label when rate moves
  • how to clear form fields in react after submit
  • on ddrop function react dropzone parameters
  • traduire text with api translate google in react
  • stop playing music when page is closed react
  • react form input not working
  • install boxicons in react
  • import { useBeforeunload } from 'react-beforeunload
  • lazy react
  • switch case in jsx
  • search not working in react mdbdatatable for link
  • show and hide div based on radio button click react
  • corousal in react
  • onclick start and stop the count react
  • how to redirect a form to another page when we submitted a form in react js
  • scroll down react js typescript
  • telerik grid data automatically scroll to particular record in react
  • how to make a search bar in react django
  • reactjs upload zip using fetch
  • setting react state with produce immer
  • how to get the data from clicking on notification on web in reactjs
  • validate form in reactstrap modal api
  • how to communicate with an iframe react
  • textfield label language react
  • form action using react
  • react Alert when rate changes
  • reactjs classlist remove
  • background image not loading from a link react
  • returned data has p tags react
  • why to escape from quotation mark in react
  • select checkbox raitng in order javascript React
  • react s.a.createElement("div",{className:"d-none d-lg-flex flex-content"},s.a.createElement(u.a.Body,{noScroll:!0}
  • material ui css supports
  • react checkbox tree
  • react dynamic load script
  • Material-ui Adb icon
  • how to convert time to users timezone in react
  • react component visibility
  • how to change tab color react bootstraps customixation
  • font awesome react share faShare
  • image and video lightbox react
  • how to make sticky footer with react router
  • how many data binding in react
  • react bootsrap color picker
  • filter based on input typing react
  • how to change grid size with conditional expression in react
  • change direction in material ui
  • react bulma login
  • react cheat sheets
  • react cam filters
  • use of parse in react
  • react keep screen on
  • react Fractional rating
  • exemple de modal reactjs
  • close button react
  • how do you iterate through a list in react stackoverflow
  • geocoding react
  • react rating with fractions
  • react-reveal-flip
  • renderIndicator example react responsive carousel
  • log errors react
  • antd tooltip width react jss
  • in which table our redux option values are save
  • how to append a data to list in redux
  • react social login buttons
  • open close children modal react
  • react html symbol code
  • write !important in react
  • how to get code suggestions for react components
  • how to resolve click for div logging as parent too, in react
  • how to place text over image in react
  • react ctx
  • toast notification bootstrap react js github
  • react paper FAB styling
  • redux filter pane
  • react-geocode lat lng to address
  • react toastr
  • react Fontawesome Thumbs Up/Down rating (showcases background icon hiding)
  • svg in react
  • material ui hide asterisk
  • react countup with visibility senor
  • popup react now ui
  • toast message in reactstarp
  • semantic UI react focus on input
  • how to use nivo slider in react
  • how to simulate dropodown click in react testing
  • react testing library getBy image
  • button click open external link react
  • gatsby underline link if page is active
  • take site to top after clicking in react
  • Stateless/Presentational/Dumb component
  • display only initials from full name reactjs
  • pass text to button component react
  • sequilze REACTJS
  • how to set dynamic size in react js
  • react fade on mount
  • unable to add class in jsx
  • React social login button
  • react clear input after button click
  • react query stop refetch when i switch browser tabs (globally)
  • rxjs mapto vs tap
  • react toggle boolean state
  • using shortid in react lists
  • antd modal hide ok button
  • redux filter pane container
  • How to make a buttom in react stackoverflow
  • dropzone react view photo
  • handling props in class components reactjs ijnterview questions
  • coreui react change background color
  • react-google-maps satelite
  • jsx tag with children react js
  • react hook form password validation uppercase
  • React Readonly fractional rating
  • onClick={ (window.open react js
  • pass status of checkbox to a function react js
  • where to put background images in react app
  • mat slider in a reactve form
  • write button hover in react
  • 'Navbar' is not defined react/jsx-no-undef
  • casl react
  • react get dynamic window sizes
  • react textarea onchange focus change
  • react not getting img by src
  • tailwind intenseness react
  • ej2 react calenders
  • react query stop refetch when i switch browser tabs (per query)
  • drag n drop file upload react
  • react js Property 'Select' does not exist on type 'Form'.ts(2339) an
  • react prevent 404 error after page refresh
  • why can't i move my react bootstrapmodal over to the left
  • react icons cdn
  • redux filter movies list container
  • image continuous changing div react
  • how to add oncklick button react
  • controlled components reactjs ijnterview questions
  • render a list using array filter react
  • element ui loading schange text
  • Material-ui Account Balance icon
  • React Readonly rating
  • how to apply hover and focus styles on style object material ui
  • search bar idle time react js
  • props with ternary in react
  • interpolation react
  • make input fixed position reactjs
  • create dots in carousel react js bootraps
  • redux form radio not returning VALUE
  • ./src/components/Header/HeaderElements.js [1] Module not found: Can't resolve 'react-icons/fa' in '/Users/rubenmatamoros/Desktop/ucf-coding-bootcamp-2020/fitter/client/src/components/Header'
  • hide component blur react hooks
  • trash alternate outline icon not coming to right side react
  • create-react-app height issues with flex
  • react bootstrap navbar fade out
  • How to use paystack with react
  • scrollreveal react tutoriel
  • react js bootstrap select option required
  • Snackbar - NOTIFICATIONS INSPIRED BY GOOGLE MATERIAL DESIGN
  • how to change a react link icon when you send the link as message in whatsapp
  • react js text input with button
  • detect browser back button click react
  • auto closing not working jsx
  • convert to jsx
  • dynamic for loop react
  • react function with form
  • editable pre input react
  • controlled components reactjs interview questions
  • scrollspyNav react
  • the email address is badly formatted react
  • module missing for arearange highcharts react
  • Material-ui bank icon
  • react load after scrolling
  • how to create contact form in react js with bootstrap
  • react conditional array item
  • how to find the radius of a loacation in node js
  • reactjs copytoclipboard box
  • selected css based on route react
  • onclick react history map
  • tabs react tailwind
  • chromepicker react-color not working
  • react select search getOptions
  • Burger menu bulma React
  • fabic js save and render
  • react measure page load time
  • how to turn mapped data into upper case react
  • amazing spinners and loaders for reactjs
  • dropdown list value react fragment
  • react button click scroll section codepen
  • load all icon from a folder in react
  • react 5 to 10 rating
  • make custom draggable in react
  • react createElement interactive button
  • create react app theme_color
  • import image in react js
  • reactjs change fill color .svg
  • global keyboard shortcuts react
  • display raw html as plain text react js
  • how to change favicon dynamic in react js
  • uncontrolled components reactjs interview questions
  • change candle color react highcharts
  • how to get circle around text in react natvie
  • change theme in react-toastify
  • react inlinle style set background image
  • bootstrap react menu examples
  • vue 3 suspense
  • antd dropdown stop propogation
  • react buttons npm
  • react native text-input-mask this.props.refInput
  • how to make sugesstion input feild in react
  • jsx render array
  • how to rerender a page in React when the user clicks the back button
  • npm i react-router semantic-ui-react semantic-ui-css
  • adding preview images to react apps for linkedin
  • how to only register one click on nested component and not parent component in react js
  • text field drag and drop reactjs
Sours: https://www.codegrepper.com/code-examples/javascript/material+ui+grid+no+grow
Material UI Tutorial #5 - makeStyles Hook (Custom CSS)

Flexbox

Edit this page

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

If you are new to or unfamiliar with flexbox, we encourage you to read this CSS-Tricks flexbox guide.

Properties for the Parent

display

I'm a flexbox container!

flex-direction

flex-wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

justify-content

align-items

align-content

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Item 1

Properties for the Children

order

flex-grow

flex-shrink

align-self

API

Import namePropCSS propertyTheme key
none
none
none
none
none
none
none
none
none
none
Sours: https://mui.com/system/flexbox/

Flex material grow ui

Display flex not working inside Material UI Grid Item

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Advertising Reach developers & technologists worldwide ,Asking for help, clarification, or responding to other answers.

relevant HTML:

<divclassName={classes.root}><GridcontaineralignItems={"stretch"}><Griditemxs={9}> ...other components <divstyle={{display: "flex", flexDirection: "column", justifyContent: "flex-end", alignItems: "flex-end" }} ><p>hello world</p></div></Grid><Griditemxs={12}><divstyle={{display: "flex", flexDirection: "column", justifyContent: "flex-end", alignItems: "flex-end", color: "red" }} ><p>I think you mean to do this... hello world</p></div></Grid></Grid></div>

I was trying to create a react component.,Create a Grid container., The issue is present in the latest release.

item | bool | false | Iftrue, the component will have the flex item behavior.You should be wrapping items with a container.

load more v

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.,Properties for the Parentdisplayflex-directionflex-wrapjustify-contentalign-itemsalign-content,If you are new to or unfamiliar with flexbox, we encourage you to read this CSS-Tricks flexbox guide.

<Boxdisplay="flex">…

load more v

The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.,The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design's responsive UI is based on a 12-column grid layout.,You can switch the props' value based on the active breakpoint. For instance, we can implement the "recommended" responsive layout grid of Material Design.

<Gridcontainerspacing={2}><Griditemxs={8}><Item>xs=8</Item></Grid><Griditemxs={4}><Item>xs=4</Item></Grid><Griditemxs={4}><Item>xs=4</Item></Grid><Griditemxs={8}><Item>xs=8</Item></Grid></Grid>

load more v

Pretag

Pretag team - issue, fix, solve, resolve

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.,Since Material uses flexbox they make use of property flexGrow,This is the property that governs the growth of elements in the grid.

This is the property that governs the growth of elements in the grid.

importReactfrom'react'; importPropTypesfrom'prop-types'; import { withStyles } from'material-ui/styles'; importPaperfrom'material-ui/Paper'; importGridfrom'material-ui/Grid'; conststyles = theme => ({ root: { flexGrow: 1, }, paper: { padding: theme.spacing.unit * 2, textAlign: 'center', color: theme.palette.text.secondary, }, }); functionCenteredGrid(props) { const { classes } = props; return ( <divclassName={classes.root}><Gridcontainerspacing={24}><Griditemxs={12}sm={6}><Paper>xs=12 sm=6</Paper></Grid><Griditemxs={12}sm={6}><Paper>xs=12 sm=6</Paper></Grid></Grid></div> ); } CenteredGrid.propTypes = { classes: PropTypes.object.isRequired, }; exportdefaultwithStyles(styles)(CenteredGrid);

load more v

So while it's not required to use Material UI's Grid to build grids in your application, using it does have some advantages (and disadvantanges).,So how do we implement responsive design with Material UI's Grid? As you can see in our Example 4 component in the above Sandbox:,So to keep the definition really simple, a flex container is an element with CSS display: flex. That's it, by that one CSS property, that element becomes a flex container and the children of that element magically become flex items. Check out Example 1 below for a simple example of a pure flexbox with no other CSS properties other than a border on the items so you can see how they are laid out by default.

Looking at Material UI's default breakpoints, we can see these are the horizontal screen sizes we will use as props to the Grid component. These are also used elsewhere in Material UI.

xs, extra - small: 0 pxsm, small: 600 pxmd, medium: 960 pxlg, large: 1280 pxxl, extra - large: 1920 px
xs, extra - small: 0 pxsm, small: 600 pxmd, medium: 960 pxlg, large: 1280 pxxl, extra - large: 1920 px

So how do we implement responsive design with Material UI's Grid? As you can see in our Example 4 component in the above Sandbox:

importReactfrom"react";import { makeStyles } from"@material-ui/core/styles";importPaperfrom"@material-ui/core/Paper";importGridfrom"@material-ui/core/Grid";const useStyles = makeStyles((theme) => ({ paper: { padding: theme.spacing(1), textAlign: "center", color: theme.palette.text.secondary }}));functionGridItem({ classes }) { return (
importReactfrom"react";import { makeStyles } from"@material-ui/core/styles";importPaperfrom"@material-ui/core/Paper";importGridfrom"@material-ui/core/Grid";const useStyles = makeStyles((theme) => ({ paper: { padding: theme.spacing(1), textAlign: "center", color: theme.palette.text.secondary }}));functionGridItem({ classes }) { return (

load more v

The container prop gives the <Grid /> component the CSS properties of a flex container, and the item prop gives the CSS properties of a flex item.,Material-UI uses a negative margin to implement spaces between grid items. When the negative margin goes beyond the <body>, a horizontal scroll appears.,In the following example, you can see that the items around the xs={9} item auto-resize, resulting in a perfect layout.

Pretag

Pretag team - issue, fix, solve, resolve

Other "material-display" queries related to "Display flex not working inside Material UI Grid Item"

Sours: https://pretagteam.com/question/display-flex-not-working-inside-material-ui-grid-item
React \u0026 Material UI #12: Cards + Cards layout with Grid

Purpose of flexGrow in the parent div of a Material UI grid?

The comment of AnthonyZ said:

The only time it would make a difference is when there is a flex parent.

But in a React App the outer Div in the Body is not the outer-most parent. In HTML/CSS that is the HTML and the BODY. In a create-react-app they get the default "display:block" in either index.css or base stylesheet (of the browser).

I solved it by doing the following:

Move index.css to public

Seriously, why is index.css in /src and index.html in /public ??

Modify index.css

Specify "display:flex" for both HTML and BODY in index.css

Modify App.js

In App.js create an outer div

TopMenu.js

If you inspect the elements, you'll see that the whole height is taken started from the HTML-tag.

Problem with this solution: That annoying scrollbar which takes lets you scroll the height of the AppBar. If somebody has a solution for that, I'll edit my answer (or delete the answer when there's a far better solution :-) )

answered Nov 27 '20 at 14:08

BertCBertC

7571010 silver badges2525 bronze badges

Sours: https://stackoverflow.com/questions/56386216/purpose-of-flexgrow-in-the-parent-div-of-a-material-ui-grid

You will also be interested:

He slid his hand over his leg to the knee. Still looking at her leg, he said, "Have you ever done. anything to her while she's like this?" I wanted to lie, but I just said, I was only peeking under my.



1792 1793 1794 1795 1796