diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index b23f287f2..04098409a 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -24,6 +24,7 @@ module.exports = { alignItems: ['responsive'], alignSelf: ['responsive'], justifyContent: ['responsive'], + alignContent: ['responsive'], flexbox: ['responsive'], float: ['responsive'], fontFamily: ['responsive'], diff --git a/src/corePlugins.js b/src/corePlugins.js index 2b20774a6..973b2f746 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -18,6 +18,7 @@ import flexWrap from './plugins/flexWrap' import alignItems from './plugins/alignItems' import alignSelf from './plugins/alignSelf' import justifyContent from './plugins/justifyContent' +import alignContent from './plugins/alignContent' import flexbox from './plugins/flexbox' import float from './plugins/float' import fontFamily from './plugins/fontFamily' @@ -97,6 +98,7 @@ export default function(config) { alignItems, alignSelf, justifyContent, + alignContent, flexbox, float, fontFamily, diff --git a/src/plugins/alignContent.js b/src/plugins/alignContent.js new file mode 100644 index 000000000..a70ec6cbe --- /dev/null +++ b/src/plugins/alignContent.js @@ -0,0 +1,24 @@ +export default function({ variants }) { + return function({ addUtilities }) { + addUtilities( + { + '.content-center': { + 'align-content': 'center', + }, + '.content-start': { + 'align-content': 'flex-start', + }, + '.content-end': { + 'align-content': 'flex-end', + }, + '.content-between': { + 'align-content': 'space-between', + }, + '.content-around': { + 'align-content': 'space-around', + }, + }, + variants + ) + } +} diff --git a/src/plugins/flexbox.js b/src/plugins/flexbox.js index 2f52fd860..175307f35 100644 --- a/src/plugins/flexbox.js +++ b/src/plugins/flexbox.js @@ -2,21 +2,6 @@ export default function({ variants }) { return function({ addUtilities }) { addUtilities( { - '.content-center': { - 'align-content': 'center', - }, - '.content-start': { - 'align-content': 'flex-start', - }, - '.content-end': { - 'align-content': 'flex-end', - }, - '.content-between': { - 'align-content': 'space-between', - }, - '.content-around': { - 'align-content': 'space-around', - }, '.flex-1': { flex: '1 1 0%', },