小编Bri*_*ian的帖子

一个弹性容器有四个孩子,每个孩子的灵活度为25%,最小宽度.flex-flow设置为row wrap.Safari之外的浏览器按预期处理这个:如果达到最小宽度,它将下一个项目包装到下一行.在Safari中,它会溢出容器.

请参阅此处的演示:http: //codepen.io/lbilharz/pen/aJbkI

玉

h1 Why this ain't wrappin' in mobile-safari?
  .flex
    for i in ['one','two','three','four']
      .item
        h2=i

唱针

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

有任何想法吗？

我正在尝试使用Flexbox构建"Holy Grail"布局.

• 固定标题
• 固定,可折叠,可滚动左导航
• 灵活的内容区域
• 固定,可折叠,可滚动的右导航

见下文:

除了标题下方"app"区域的高度外,我一切正常.现在它是100vh(视口高度的100%),但这包括64px标题.

我尝试计算(100vh - 64px),但这与flex不相符.

这是我的基本HTML结构:

<main>
    <header></header>
    <app>
        <nav>Left Nav</nav>
        <article>Content</article>
        <aside>Right Nav</aside>
    </app>
</main>

和支持CSS:

main {
    display: flex;
    flex-direction: column;
}

header { 
    z-index: 0;
    flex: 0 0 64px;
    display: flex;
}

app {
    flex: 1 1 100vh;
    display: flex;
}

nav {
    flex: 0 0 256px;
    order: 0;
}

article {
    flex: 1 1 100px;
    order: 1;
}

aside {
    flex: 0 0 256px;
    order: 2;
}

- …

这不会在Firefox中的打印预览中产生预期结果:

<aside>
  side
</aside>

<div>
  <p> page 1 </p>
  <p> page 2 </p>
</div>

CSS:

body{
  display: flex;
}

aside{
  flex: none;
  width: 100px;
}

div{
  flex: auto;
}

p{
  break-after: always;
  page-break-after: always;
}

在Chrome和IE中,我得到了2页,就像我应该的那样.当祖先是弹性框时,FF似乎不会破坏2页中的div.为什么？

我有一个我想要全屏的布局.这就是它现在的样子:

我想要的是布局占用屏幕上的所有空间(所以提交按钮应该在底部向下).我正在尝试使用,{flex: 1}但它不起作用.这是代码:

'use strict';

const React = require('react-native');
const {
  StyleSheet,
  Text,
  View,
  BackAndroid,
  TextInput,
  TouchableNativeFeedback,
  ScrollView
} = React;

const ActionButton = require('./action-button');

module.exports = React.createClass({
  handleBackButtonPress () {
    if (this.props.navigator) {
      this.props.navigator.pop();
      return true;
    }

    return false;
  },

  componentWillMount () {
    BackAndroid.addEventListener('hardwareBackPress', this.handleBackButtonPress);
  },

  componentWillUnmount () {
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButtonPress);
  },

  onInputFocus (refName) {
    setTimeout(() => {
      let scrollResponder = this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
        React.findNodeHandle(this.refs[refName]),
        0,
        true
      );
    }, 50);
  },

  render: function() {
    return (
      <ScrollView ref='scrollView' …

我正在尝试构建一个定价表,其中每列包含一张卡片.我希望所有卡片都伸展到其父(.col)元素的高度.

注意:我正在使用Bootstrap 4,并尝试使用现有的网格系统(为了保持一致性)和这个特定的标记来实现这一点.我无法让卡片增长到父容器的高度.这是否可以使用当前标记？

基本标记是这样的:

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

这是我的笔:https://codepen.io/anon/pen/oZXWJB

当用户扩展浏览器窗口时,我希望我的css flexboxes最多有3列.使用我当前的代码,它向内正确弯曲,没有最小列数,但是当向外扩展时,它将始终自动将所有flexbox扩展为一行. http://jsfiddle.net/oq6prk1p/581/

在这种情况下,我试图只使用css文件来实现这一点,并且根本不编辑html文件.到目前为止,这是我最接近的:

html文件:

<main class="twit-container">

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        Sitting in web dev... This class is so awesome!
      </p>
      <p class="twit-attribution">
        <a href="#">CSMajor2017</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">BeaverBeliever</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
         text
      </p>
      <p class="twit-attribution">
        <a href="#">NewtonRulez</a>
      </p>
    </div>
  </article>

  <article class="twit"> …

大家好,今天发生在我身上真的很奇怪...我正在编写一个代码来创建子菜单,我使用了该属性

 display: -webkit-flex;
 display: flex;
 align-items: center;

以这种方式,各个部分(标签li)的声音垂直居中.我之前已经多次使用这些属性用于其他代码,并且它们始终正常工作.和往常一样,我检查我的mac,iPhone 5,firefox和chrome上的代码.

但是一旦我通过我的iphone 5(版本8.3)看到该文件,我感到震惊......属性不起作用.我已经显示了旧文件,甚至与他们一起出现了同样的问题.

在此输入图像描述

令人惊奇的是,mc可以很好地与我的兄弟使用iPhone 5(更新到9.x版本):

http://i.stack.imgur.com/1bHhT.jpg

我不明白......但这怎么可能？

这是一个错误？还是我的iphone坏了？

我有一个Ionic> = 2应用程序,我希望在页面顶部有2或3个固定行,然后将页面的其余部分作为可滚动列表(后来我希望它是虚拟的,但只是希望得到简单的列表工作forst).

作为一个简化的例子,我有以下插件.这里重复的标记是..

    <ion-header>
          <ion-navbar>
            <ion-title>{{ appName }}</ion-title>
           </ion-navbar>
    </ion-header>

    <ion-content scroll=false>
       <ion-grid>
         <!-- Row 1 fixed at top -->
         <ion-row>
           <ion-col>
             <ion-searchbar></ion-searchbar>   
           </ion-col>
           <!-- Other cols -->
         </ion-row>

        <!-- Row 2 Scrollable list -->
        <ion-row>
          <ion-col>
            <ion-list>    
              <ion-item *ngFor="let item of data">      
                <div>{{item}}</div>
              </ion-item>          
            </ion-list >  
          </ion-col>
       </ion-row>

       </ion-grid>
    </ion-content>

问题是搜索栏也会滚动列表,而我希望它始终保持在页面顶部可见.

有没有人知道为什么我的搜索栏也会滚动到这个与离子列表完全分开的行？我应该以这种方式使用离子网吗？

在此先感谢您的帮助!

我有一个C++程序,它调用由Flex/Bison生成的一些C例程.

当我以Windows 8.1 64位平台为目标时,我在运行时遇到以下异常:

Unhandled exception at 0x0007FFFA70F2C39 (libapp.dll) in application.exe: 0xC0000005: 
Access violation writing location 0x000000005A818118.

我将此异常跟踪到以下代码:

YY_BUFFER_STATE yy_create_buffer( FILE *file, int size )
{
   YY_BUFFER_STATE b;
   b = (YY_BUFFER_STATE) yy_flex_alloc( sizeof( struct yy_buffer_state ) );
   if ( ! b )
      YY_FATAL_ERROR( "out of dynamic memory in yy_create_buffer()" );
   b->yy_buf_size = size; // This access is what throws the exception
}

作为参考,代码中的其他地方(也由Flex/Bison生成),我们有:

typedef struct yy_buffer_state *YY_BUFFER_STATE;
struct yy_buffer_state
{
   FILE *yy_input_file;
   char *yy_ch_buf;
   char *yy_buf_pos;
   yy_size_t yy_buf_size;
   // ... …

我正在尝试使用Newtonsoft的JsonConvert将对象列表序列化为JSON.我的Marker类包含一个枚举,我正在尝试将它序列化为一个camelCase字符串.基于其他Stackoverflow问题,我正在尝试使用StringEnumConverter:

public enum MarkerType
{
    None = 0,
    Bookmark = 1,
    Highlight = 2
}

public class Marker
{
    [JsonConverter(typeof(StringEnumConverter)]
    public MarkerType MarkerType { get; set; }
}

这部分有效,但是当我调用时,我的MarkerType字符串是PascalCase:

var json = JsonConvert.SerializeObject(markers, Formatting.None);

结果:

{
    ...,
    "MarkerType":"Bookmark"
}

我真正想要的是:

{
    ...,
    "MarkerType":"bookmark"
}

该StringEnumConverter文档提到一个CamelCaseText属性,但我不知道如何使用的传递JsonConverterAttribute.以下代码失败:

[JsonConverter(typeof(StringEnumConverter), new object[] { "camelCaseText" }]

如何指定CamelCaseText为属性StringEnumConverter的JsonConverterAttribute？